/* UIX Icons browser (/icons/), v3. Loads after ds.css and uses only --ux-* tokens (they flip with color-scheme). */

/* ---------------------------------------------------------------- top: one dominant search */
.ib-top { padding: clamp(28px, 2vw + 16px, 56px) 0 14px; }
.ib-find { max-width: 760px; margin-inline: auto; }
.ib-search { height: 64px; padding: 0 14px 0 22px; gap: 14px; border-radius: 18px; border-color: var(--ux-control-line); box-shadow: var(--ux-e3); }
.ib-search > svg { width: 22px; height: 22px; color: var(--ux-muted); }
.ib-search input { font-size: 1.125rem; }
.ib-search:focus-within { border-color: var(--ux-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ux-accent) 22%, transparent), var(--ux-e3); }
.ib-search:focus-within > svg { color: var(--ux-accent); }
.ib-search .ux-kbd { min-width: 26px; height: 26px; }
.ib-count { min-height: 20px; margin: 10px 0 0; color: var(--ux-muted); font-size: .8125rem; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- style filter row (sticky) */
.ib-bar { position: sticky; top: var(--ux-header-h); z-index: 40; border-bottom: 1px solid var(--ux-line); background: color-mix(in srgb, var(--ux-bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* "Skip to icons": lives in the sticky bar so it shows under the header when focused */
.ib-bar .ux-skip { top: -9999px; left: var(--ux-gutter); }
.ib-bar .ux-skip:focus { top: calc(100% + 8px); }
.ib-bar__row { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
.ib-styles { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px 0; }
.ib-sg { display: inline-flex; align-items: center; gap: 4px; padding-inline: 14px; }
.ib-sg + .ib-sg { border-left: 1px solid var(--ux-line); }
.ib-sg__l { margin-right: 6px; color: var(--ux-muted); font: 600 .6875rem/1 var(--ux-font-display); letter-spacing: .06em; text-transform: uppercase; }
.ib-sbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--ux-line-strong); border-radius: var(--ux-r-pill); background: none; color: var(--ux-muted); font: 500 .8125rem/1 var(--ux-font); white-space: nowrap; cursor: pointer; transition: background var(--ux-dur), color var(--ux-dur), border-color var(--ux-dur); }
.ib-sbtn:hover { background: var(--ux-hover); color: var(--ux-text); }
.ib-sbtn[aria-pressed="true"] { border-color: var(--ux-accent); background: var(--ux-accent); color: var(--ux-on-accent); font-weight: 600; }
.ib-sbtn[aria-pressed="true"]:hover { background: var(--ux-accent); color: var(--ux-on-accent); }
.ib-sg:first-child { padding-left: 0; }
.ib-sbtn[aria-disabled="true"], .ib-sbtn:disabled { border-style: dashed; opacity: .6; cursor: not-allowed; }
.ib-sbtn[aria-disabled="true"]:hover, .ib-sbtn:disabled:hover { background: none; color: var(--ux-muted); }
.ib-sbtn:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.ib-sbtn small { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border: 1px solid var(--ux-line-strong); border-radius: 5px; color: var(--ux-muted); font: 600 .5625rem/1 var(--ux-font-display); letter-spacing: .04em; text-transform: uppercase; }
.ib-sbtn[aria-pressed="true"] .ib-tag-free { border-color: color-mix(in srgb, var(--ux-on-accent) 55%, transparent); color: var(--ux-on-accent); }
.ib-sbtn .ib-tag-soon { border-style: dashed; }
.ib-filters-btn { display: none; flex: none; max-width: 150px; }
.ib-filters-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-filters-btn svg { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------- body: categories | grid */
.ib-app { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 20px; padding-bottom: calc(var(--ib-sheet-h, 0px) + 40px); }
.ib-side { position: sticky; top: calc(var(--ux-header-h) + var(--ib-bar-h, 54px) + 16px); max-height: calc(100vh - var(--ux-header-h) - var(--ib-bar-h, 54px) - var(--ib-sheet-h, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ux-line-strong) transparent; padding: 0 6px 16px 0; }
.ib-side__head { display: none; }
.ib-side__title { margin: 0; font-size: 1.0625rem; }
.ib-cats :is(a, button) { padding: 6px 10px; font-size: .84375rem; }
.ib-cats > ul:first-child :is(button) { color: var(--ux-text); font-weight: 600; }
.ib-cats > ul:first-child :is(button)[aria-current="true"] { color: var(--ux-accent); }
.ib-cn { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ib-cn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-ci { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; color: color-mix(in srgb, var(--g, var(--ux-text)) 72%, var(--ux-text)); opacity: .85; transition: opacity var(--ux-dur); }
.ib-ci svg { width: 16px; height: 16px; }
.ib-cats button:hover .ib-ci, .ib-cats button[aria-current="true"] .ib-ci { opacity: 1; }
.ib-group { margin: 20px 10px 6px; color: var(--ux-muted); font: 600 .6875rem/1 var(--ux-font-display); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.ux-catlist li:has(> .is-zero) { display: none; }
.ux-catlist button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ib-scrim { position: fixed; inset: 0; z-index: 65; background: rgb(10 8 20 / .45); }

.ib-main { min-width: 0; }
.ib-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.ib-scope[hidden] { display: none; }
.ib-scope__n { color: inherit; font: 500 .75rem/1 var(--ux-mono); opacity: .75; }
.ib-link { padding: 0; border: 0; background: none; color: var(--ux-accent); font: inherit; font-size: .875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* virtualised grid: #grid holds the full height, #win the rows on screen */
.ib-grid { position: relative; display: block; min-height: 200px; }
.ib-grid__win { position: absolute; inset: 0 0 auto 0; display: grid; gap: 6px; }
.ib-grid .ux-wall__cell { height: 100%; aspect-ratio: auto; border-radius: 14px; border-color: var(--ux-line); background: var(--ux-surface-2); cursor: pointer; font: inherit; }
.ib-grid .ux-wall__cell:not(.ib-skel):hover { border-color: var(--ux-line-strong); background: var(--ux-surface); box-shadow: var(--ux-e2); }
.ib-grid .ux-wall__cell:not(.ib-skel):focus-visible { border-color: var(--ux-focus); background: var(--ux-surface); }
.ib-grid .ux-wall__cell[aria-pressed="true"] { border-color: var(--ux-accent); background: var(--ux-accent-soft); box-shadow: 0 0 0 1px var(--ux-accent); }
.ib-cellst { position: absolute; top: 7px; left: 8px; max-width: calc(100% - 44px); overflow: hidden; color: var(--ux-muted); font: 600 .5625rem/1 var(--ux-font-display); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.ib-grid .ux-wall__cell svg { width: 26px; height: 26px; color: var(--ib-color, currentColor); }
.ib-grid .ux-wall__cell:not([aria-pressed="true"]):hover svg, .ib-grid .ux-wall__cell:not([aria-pressed="true"]):focus-visible svg { color: var(--ib-color, var(--ux-accent)); }
.ib-grid .ux-wall__name { bottom: 6px; font-size: .625rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ib-grid .ux-wall--named .ux-wall__cell svg { transform: translateY(-9px); }
.ib-cell:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 1px; }
.ib-sw :is(.ib-grid, .ib-sheet) svg.sk { stroke-width: var(--ib-sw); }
.ib-grid .ux-wall__cell .ib-lockic svg { color: var(--ux-pro-ink); opacity: .75; }
.ib-cellpro { position: absolute; top: 6px; right: 6px; height: 15px; padding: 0 4px; border-radius: 4px; font-size: .5rem; }
.ib-skel { background: var(--ux-well); animation: ib-pulse 1.1s ease-in-out infinite alternate; cursor: default; }
@keyframes ib-pulse { from { opacity: .45; } to { opacity: 1; } }
.ib-empty { padding: 48px 16px; color: var(--ux-muted); text-align: center; }
.ib-empty__t { margin: 0 0 8px; color: var(--ux-text); font-size: 1.125rem; font-weight: 600; }
.ib-empty .ib-chips { justify-content: center; margin-top: 12px; }
.ib-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* about this page (collapsed, crawlable) */
.ib-about-wrap { padding-block: 8px 48px; }
.ib-about { max-width: 760px; margin-inline: auto; border: 1px solid var(--ux-line); border-radius: var(--ux-r-lg); background: var(--ux-surface); }
.ib-about > summary { padding: 14px 18px; color: var(--ux-muted); font-size: .875rem; font-weight: 600; cursor: pointer; }
.ib-about > summary:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; border-radius: var(--ux-r-lg); }
.ib-about__body { padding: 0 18px 18px; }
.ib-about__body .ux-lede { margin: 8px 0 0; font-size: 1rem; }

/* ---------------------------------------------------------------- floating detail panel */
.ib-sheet { position: fixed; left: 0; right: 0; bottom: 16px; z-index: 60; pointer-events: none; opacity: 0; transform: translateY(calc(100% + 24px)); transition: transform .26s var(--ux-ease), opacity .2s; }
.ib-sheet.is-open { opacity: 1; transform: none; }
.ib-card { position: relative; display: grid; grid-template-columns: 216px minmax(0, 1fr) 292px; gap: 24px; min-height: 300px; padding: 18px; border: 1px solid var(--ux-line-strong); border-radius: 22px; background: var(--ux-surface); color: var(--ux-text); pointer-events: auto;
  box-shadow: inset 0 1px 0 var(--ux-edge, transparent), 0 1px 2px var(--ux-shadow), 0 12px 24px -12px var(--ux-shadow-lg), 0 32px 72px -28px var(--ux-shadow-lg); }
.ib-close { position: absolute; top: 10px; right: 10px; z-index: 2; }
.ib-handle { display: none; }

.ib-preview { position: relative; width: 216px; height: 216px; padding: 12px; border: 1px solid var(--ux-line); border-radius: 16px; background: var(--ux-grid), var(--ux-well); background-size: 8px 8px; background-position: 12px 12px; color: var(--ux-text); }
.ib-stage { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ib-color, currentColor); }
.ib-stage svg { width: 100%; height: 100%; }
.ib-stage .ib-stagelock { display: grid; place-items: center; width: 40%; height: 40%; color: var(--ux-pro-ink); opacity: .75; }
.ib-keylines { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); stroke: var(--ux-accent); opacity: .6; pointer-events: none; }
.ib-pvtools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.ib-tiny { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ux-line); border-radius: 8px; background: color-mix(in srgb, var(--ux-surface) 88%, transparent); color: var(--ux-muted); cursor: pointer; transition: color var(--ux-dur), border-color var(--ux-dur); }
.ib-tiny svg { width: 15px; height: 15px; }
.ib-tiny:hover { color: var(--ux-text); border-color: var(--ux-line-strong); }
.ib-tiny[aria-pressed="true"] { border-color: color-mix(in srgb, var(--ux-accent) 45%, transparent); background: var(--ux-accent-soft); color: var(--ux-accent); }
.ib-tiny:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.ib-bg-dark .ib-preview { color-scheme: dark; }
.ib-bg-light .ib-preview { color-scheme: light; }

.ib-mid { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.ib-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding-right: 4px; }
.ib-name { margin: 0 6px 0 0; min-width: 0; font: 600 1.375rem/1.25 var(--ux-mono); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ib-name:focus { outline: none; } .ib-name:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; border-radius: 4px; }
.ib-ib { color: var(--ux-muted); } .ib-ib:hover { color: var(--ux-text); }
.ib-ib.is-copied, .ib-tiny.is-copied { color: var(--ux-accent); }
#pBadge { display: inline-flex; margin-left: 4px; }
.ib-free { height: 22px; padding: 0 9px; border-color: color-mix(in srgb, var(--ux-accent) 30%, transparent); background: var(--ux-accent-soft); color: var(--ux-accent); font-size: .6875rem; }
.ib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ib-meta .ux-chip { flex: none; height: 24px; padding: 0 9px; font-size: .75rem; cursor: pointer; }
.ib-catchip { border-color: color-mix(in srgb, var(--ux-accent) 30%, transparent); color: var(--ux-accent); font-weight: 600; }
.ib-tags { display: contents; }
.ib-tag { border-color: var(--ux-line); color: var(--ux-muted); }
.ib-tag:hover { color: var(--ux-text); border-color: var(--ux-line-strong); }
.ib-strip { display: flex; flex-wrap: wrap; gap: 5px; }
.ib-thumb { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--ux-line); border-radius: 10px; background: var(--ux-surface-2); color: var(--ux-text); cursor: pointer; transition: border-color var(--ux-dur), background var(--ux-dur); }
.ib-thumb:hover { border-color: var(--ux-line-strong); }
.ib-thumb[aria-pressed="true"] { border-color: var(--ux-accent); background: var(--ux-accent-soft); color: var(--ux-accent); box-shadow: 0 0 0 1px var(--ux-accent); }
.ib-thumb:focus-visible { outline: 2px solid var(--ux-focus); outline-offset: 2px; }
.ib-thumb__i { display: block; width: 20px; height: 20px; }
.ib-thumb__i svg { display: block; width: 100%; height: 100%; }
.ib-thumb__i:empty { border-radius: 6px; background: var(--ux-well-2); opacity: .6; }
.ib-thumb__lk { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid var(--ux-pro-edge); border-radius: 50%; background: var(--ux-pro-bg); color: var(--ux-pro-ink); }
.ib-thumb__lk svg { width: 9px; height: 9px; }

.ib-code { display: flex; flex-direction: column; flex: 1 1 96px; min-height: 96px; overflow: hidden; border: 1px solid light-dark(rgb(0 0 0 / .4), rgb(255 255 255 / .08)); border-radius: 12px; background: var(--ux-code-bg); color: var(--ux-code-text); color-scheme: dark; }
.ib-code__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 6px; border-bottom: 1px solid rgb(255 255 255 / .08); }
.ib-code__tabs { display: flex; gap: 2px; }
.ib-code__tabs button { height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--ux-code-muted); font: 500 .75rem/1 var(--ux-font); cursor: pointer; }
.ib-code__tabs button[aria-selected="true"] { background: rgb(255 255 255 / .1); color: var(--ux-code-text); }
.ib-code__tabs button:focus-visible { outline: 2px solid #B79BFF; outline-offset: 1px; }
.ib-code .ib-tiny { width: 26px; height: 26px; border-color: transparent; background: none; color: var(--ux-code-muted); }
.ib-code .ib-tiny:hover { color: var(--ux-code-text); }
.ib-code__pre { flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 12px; overflow: auto; color: var(--ux-code-text); font: 400 .71875rem/1.55 var(--ux-mono); white-space: pre-wrap; word-break: break-all; scrollbar-width: thin; }
.ib-code__pre:focus-visible { outline: 2px solid #B79BFF; outline-offset: -2px; }
.is-pro .ib-code__pre { color: var(--ux-code-muted); }

.ib-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 2px; }
.ib-ctl { min-width: 0; margin: 0; padding: 0; border: 0; }
.ib-ctl legend { padding: 0; }
.ib-lbl { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; color: var(--ux-muted); font: 600 .6875rem/1.2 var(--ux-font-display); letter-spacing: .06em; text-transform: uppercase; }
.ib-lbl output { color: var(--ux-text); font: 500 .75rem/1 var(--ux-mono); letter-spacing: 0; text-transform: none; }
.ib-ctl .ux-range { height: 20px; }
.ib-ctl .ux-range:disabled { opacity: .45; cursor: not-allowed; }
.ib-swatches { gap: 7px; }
.ib-swatches .ux-swatch span { width: 24px; height: 24px; }
.ib-swatches .ux-swatch input:checked + span, .ib-custom.is-on span { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 2px var(--ux-surface), 0 0 0 4px var(--ux-text); }
.ib-swatch--cur span { background: linear-gradient(135deg, var(--ux-text) 0 50%, var(--ux-surface) 50% 100%); }
.ib-custom span { background: var(--c, conic-gradient(from 90deg, #ea580c, #eab308, #059669, #2563eb, #6301e4, #dc2626, #ea580c)); }
.ib-custom { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.ib-custom span { display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.ib-custom:focus-visible span { outline: 2px solid var(--ux-focus); outline-offset: 4px; }
.ib-custom[aria-expanded="true"] span { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 0 0 2px var(--ux-surface), 0 0 0 4px var(--ux-text); }
.ib-hint { margin: 4px 0 0; font-size: .75rem; }

.ib-acts { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.ib-menuwrap { position: relative; }
.ib-split { display: flex; flex: 1 1 auto; min-width: 0; }
.ib-split__main { flex: 1 1 auto; min-width: 0; padding: 0 12px; white-space: nowrap; border-start-end-radius: 0; border-end-end-radius: 0; }
.ib-split__caret { width: 38px; padding: 0; margin-left: 1px; border-start-start-radius: 0; border-end-start-radius: 0; }
.ib-split__caret svg { width: 16px; height: 16px; }
.ib-acts .ux-btn svg { width: 18px; height: 18px; flex: none; }
.ib-i-copy, .ib-i-lock { display: inline-flex; }
.ib-i-lock, .is-pro .ib-i-copy { display: none; }
.is-pro .ib-i-lock { display: inline-flex; }
.ib-acts .is-copied { filter: saturate(1.1) brightness(1.05); }
.ib-locked, .ib-locked:hover, .ib-locked:active { transform: none; border-color: var(--ux-line-strong); background: var(--ux-surface-2); box-shadow: none; color: var(--ux-muted); cursor: not-allowed; filter: none; }
.ib-locked svg { color: var(--ux-pro-ink); }
.ib-code .ib-locked { background: none; border-color: transparent; color: var(--ux-code-muted); }
.ib-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 80; display: grid; min-width: 210px; max-height: min(62vh, 440px); overflow-y: auto; padding: 5px; border: 1px solid var(--ux-line-strong); border-radius: 14px; background: var(--ux-surface); box-shadow: var(--ux-e4); }
.ib-menu[hidden] { display: none; }
.ib-menu [role="menuitem"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ux-text); font: 500 .8125rem/1 var(--ux-font); text-align: left; white-space: nowrap; cursor: pointer; }
.ib-menu [role="menuitem"]:hover, .ib-menu [role="menuitem"]:focus-visible { outline: none; background: var(--ux-accent-soft); color: var(--ux-accent); }
.ib-menu hr { margin: 4px 6px; border: 0; border-top: 1px solid var(--ux-line); }
.ib-menu__n { color: var(--ux-muted); font: 500 .6875rem/1 var(--ux-mono); }
.ib-pronote { display: grid; gap: 8px; margin: 0; color: var(--ux-muted); font-size: .75rem; line-height: 1.35; }
.ib-pronote[hidden] { display: none; }
.ib-pronote__t { display: flex; align-items: center; gap: 6px; margin: 0; }
.ib-keyform { display: flex; gap: 6px; }
.ib-keyform .ux-input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 10px; font-size: .8125rem; }
.ib-keyform .ux-btn { flex: none; }
.ib-keymsg { margin: 0; font-size: .75rem; }
.ib-pronote svg { flex: none; width: 14px; height: 14px; color: var(--ux-pro-ink); }
.ib-pronote a { flex: none; color: var(--ux-accent); font-weight: 600; }
.ib-sheet [data-ux-tip]::after { z-index: 90; }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1199px) {
  .ib-card { grid-template-columns: 184px minmax(0, 1fr) 252px; gap: 20px; }
  .ib-preview { width: 184px; height: 184px; padding: 8px; background-size: 7px 7px; background-position: 8px 8px; }
  .ib-keylines { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  .ib-swatches { gap: 5px; } .ib-swatches .ux-swatch span, .ib-custom span { width: 22px; height: 22px; }
}
@media (min-width: 900px) and (max-width: 1199px) { .ib-sg { padding-inline: 10px; } .ib-sg__l { display: none; } }
@media (max-width: 959px) {
  .ib-card { grid-template-columns: 168px minmax(0, 1fr); height: auto; max-height: calc(100vh - var(--ux-header-h) - 32px); overflow-y: auto; }
  .ib-card { min-height: 0; }
  .ib-preview { width: 168px; height: 168px; padding: 12px; background-size: 6px 6px; background-position: 12px 12px; }
  .ib-keylines { inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); }
  .ib-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; align-items: end; }
  .ib-acts, .ib-pronote { grid-column: 1 / -1; }
  .ib-code { min-height: 110px; }
}
@media (max-width: 899px) {
  .ib-app { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 12px; }
  .ib-bar__row { gap: 8px; }
  .ib-filters-btn { display: inline-flex; }
  .ib-styles { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-block: 10px; margin-block: -10px; }
  .ib-styles::-webkit-scrollbar { display: none; }
  .ib-sg { flex: none; }
  .ib-side { position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(86vw, 320px); max-height: none; padding: 16px; background: var(--ux-surface); box-shadow: var(--ux-e4); transform: translateX(-102%); visibility: hidden; transition: transform .2s var(--ux-ease), visibility 0s .2s; }
  .ib-side.is-open { transform: none; visibility: visible; transition: transform .2s var(--ux-ease); }
  .ib-side__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
}
/* ---------------------------------------------------------------- phone: bottom sheet with a drag handle */
@media (max-width: 639px) {
  .ib-top { padding-top: 20px; }
  .ib-search { height: 54px; padding-left: 16px; border-radius: 15px; }
  .ib-search .ux-kbd { display: none; }
  .ib-sheet { bottom: 0; }
  .ib-sheet__wrap { padding-inline: 0; }
  .ib-card { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; max-height: 82vh; padding: 0 16px 16px; border-width: 1px 0 0; border-radius: 22px 22px 0 0; }
  .ib-handle { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; grid-column: 1 / -1; margin: 0 -16px -6px; padding: 8px 0 6px; background: var(--ux-surface); cursor: grab; touch-action: none; }
  .ib-handle span { width: 40px; height: 5px; border-radius: 99px; background: var(--ux-line-strong); }
  .ib-close { top: 10px; right: 8px; z-index: 4; }
  .ib-preview { width: 112px; height: 112px; padding: 4px; background-size: 4.333px 4.333px; background-position: 4px 4px; }
  .ib-keylines { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .ib-pvtools { top: auto; bottom: 4px; right: 4px; }
  .ib-tiny { width: 26px; height: 26px; }
  .ib-name { font-size: 1.0625rem; }
  .ib-mid { display: contents; }
  .ib-title { grid-column: 2; align-self: start; padding-right: 32px; }
  .ib-meta, .ib-strip, .ib-code { grid-column: 1 / -1; }
  .ib-code { min-height: 0; max-height: 132px; }
  .ib-right { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ib-sheet, .ib-side, .ib-side.is-open, .ib-sbtn, .ib-thumb, .ib-tiny { transition: none; }
  .ib-skel { animation: none; }
}