/* Built from dev/menu/menu.css by dev/release.js: edit it there and run `node dev/release.js` again. */
/*
  Web recreation of the Elusive ClickGUI (shade/native/src/gui/ClickGui.cpp).
  Every size below comes from CSS variables that menu.js derives from gui/MenuStyle.hpp at the client's own
  UI scale (Px / Fz / Ic), so the proportions follow the real menu instead of being restyled here.
*/

.sm-stage {
  position: relative;
  overflow: hidden;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-x pan-y pinch-zoom;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-optical-sizing: none;
  /* PutText() draws glyph by glyph with pair kerning (since the redesign): no ligatures, no contextual alternates. */
  font-kerning: normal;
  font-variant-ligatures: none;
  font-feature-settings: 'kern' 1, 'liga' 0, 'calt' 0;
  letter-spacing: 0;
  color: var(--textOn);
  contain: layout paint;
}

.sm-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sm-dim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.3725);
  pointer-events: none;
}

.sm-closed-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: 999px;
  background: rgb(8 9 12 / 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgb(230 232 238);
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 30px rgb(0 0 0 / 0.35);
}
.sm-closed-hint.is-shown { opacity: 1; pointer-events: auto; }
.sm-closed-hint kbd {
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
}
.sm-closed-hint:focus-visible { outline: 2px solid rgb(157 188 248); outline-offset: 3px; }

/* ---------------------------------------------------------------- window */

.sm-window {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--win-w);
  height: var(--win-h);
  border-radius: var(--win-r);
  /* a layer of its own only while it animates (menu.js animateMenu): kept for good, the window would stay a picture
     drawn once and then moved and scaled, which blurs its text */
  transform-origin: 50% 50%;
}

.sm-window-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--win-r);
  border: 1px solid var(--border);
  background-clip: padding-box;
  overflow: hidden;
  backdrop-filter: blur(var(--blur)) saturate(1.05);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.05);
}
.sm-window-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--content-top), var(--content-bottom));
  opacity: 0.7255;
}
.sm-window-bg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--side-w) - 2px);
  width: 1px;
  background: var(--headerLine);
}

/* Glass elements: DrawGlass() — on the dark themes a translucent fill raised towards the title colour with a faint
   sheen on top, no shadow and no edge (the light page adds its own). */
.sm-glass {
  position: absolute;
  border-radius: var(--glass-r, var(--card-r));
  background: linear-gradient(var(--glass-top), var(--glass-bottom));
  transition: box-shadow var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover);
}
.sm-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(rgb(255 255 255 / var(--edge-top, 0)), rgb(255 255 255 / var(--edge-bottom, 0)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}


.sm-text {
  display: block;
  white-space: pre;
  line-height: var(--lh);
  font-size: calc(var(--fs) / 1.2101);
}
.sm-mid { translate: 0 -0.062em; }

.sm-icon {
  display: block;
  flex: none;
  width: var(--ic);
  height: var(--ic);
  scale: 1.2;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.376;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sm-ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--title) 10.2%, transparent);
  pointer-events: none;
  translate: -50% -50%;
  animation: sm-ripple calc(0.6s * var(--anim)) linear forwards;
}
@keyframes sm-ripple {
  0% { scale: 0; opacity: 1; }
  20% { opacity: 0.64; }
  40% { scale: 0.94; opacity: 0.36; }
  83.3% { scale: 1; opacity: 0.03; }
  100% { scale: 1; opacity: 0; }
}
.sm-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- sidebar */

.sm-side {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--side-w);
  height: 100%;
}
/* the page's own svg reset (fill none, a 1.7 stroke) must not reach the menu's drawings */
.sm-stage .sm-logo, .sm-stage .sm-star-svg, .sm-stage .sm-theme-preview { stroke: none; }
.sm-stage .sm-icon { stroke-width: 1.376; }
.sm-stage .sm-check svg { stroke-width: 0.11; }
.sm-stage .sm-chevron, .sm-stage .sm-arrow { stroke: var(--soft); stroke-width: calc(1.5px * var(--s)); }
.sm-stage .sm-arrow { stroke-width: calc(1.4px * var(--s)); }
.sm-logo {
  position: absolute;
  left: calc(var(--side-pad) + var(--logo-cx) - var(--logo-w) / 2);
  top: calc(var(--logo-cy) - var(--logo-h) / 2);
  width: var(--logo-w);
  height: var(--logo-h);
  overflow: visible;
}
.sm-logo-text {
  position: absolute;
  left: calc(var(--side-pad) + var(--row-text-x));
  top: calc(var(--logo-baseline) - var(--logo-fs) * 0.8006);
  --fs: var(--logo-fs);
  --lh: var(--logo-fs);
  color: var(--title);
}

/* DrawSidebar() groupTitle(): «Основное» and «Личное» in the medium weight, dim, Px(20) above their first row */
.sm-group-title {
  position: absolute;
  left: calc(var(--side-pad) + var(--px12));
  margin-top: calc(var(--group-title-fs) * -0.5513);
  --fs: var(--group-title-fs);
  --lh: var(--group-title-fs);
  font-weight: 500;
  color: var(--textDim);
  pointer-events: none;
}

.sm-row {
  position: absolute;
  left: var(--side-pad);
  width: var(--row-w);
  height: var(--row-h);
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--row-r);
  outline: none;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
}
.sm-row:hover, .sm-row.is-hot { translate: 0 calc(var(--lift) * -1); }
.sm-row-hover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--rowHover-fill);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover);
}
.sm-row:hover:not(.is-active) .sm-row-hover,
.sm-row.is-hot:not(.is-active) .sm-row-hover { opacity: 1; }
.sm-row-icon {
  position: absolute;
  left: calc(var(--row-icon-x) - var(--row-ic) / 2);
  top: calc(50% - var(--row-ic) / 2);
  --ic: var(--row-ic);
  color: var(--gear);
  transition: color var(--t-hover) var(--e-hover);
}
.sm-row:hover .sm-row-icon { color: color-mix(in srgb, var(--gear), var(--title)); }
.sm-row.is-active .sm-row-icon, .sm-row.is-hot .sm-row-icon { color: var(--title); }
.sm-row-label {
  position: absolute;
  left: var(--row-text-x);
  top: 50%;
  margin-top: calc(var(--row-fs) * -0.5513);
  --fs: var(--row-fs);
  --lh: var(--row-fs);
  color: var(--textOn);
}
.sm-counter {
  position: absolute;
  right: var(--counter-right);
  top: calc(50% - var(--counter-h) / 2);
  min-width: var(--counter-h);
  height: var(--counter-h);
  padding: 0 calc(var(--counter-pad) / 2);
  border-radius: var(--counter-r);
  background: color-mix(in srgb, var(--title) 3.1%, transparent);
  overflow: hidden;
  transition: background var(--t-slide) var(--e-hover);
}
.sm-row.is-active .sm-counter { background: color-mix(in srgb, var(--title) 6.3%, transparent); }
.sm-counter .sm-roll { --fs: var(--counter-fs); --lh: var(--counter-fs); color: var(--title); }
.sm-row:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accentLight) 70%, transparent); }

.sm-indicator {
  --glass-top: var(--rowActive-top);
  --glass-bottom: var(--rowActive-bottom);
  --glass-r: var(--row-r);
  left: var(--side-pad);
  width: var(--row-w);
  height: var(--row-h);
  top: 0;
  transition: translate calc(var(--slide-t) * var(--anim)) var(--slide-e), opacity var(--t-hover) var(--e-hover),
    box-shadow var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover);
  pointer-events: none;
}
.sm-indicator.is-lifted { --glass-top: var(--rowActive-lift-top); --glass-bottom: var(--rowActive-lift-bottom); }

/* ---------------------------------------------------------------- top bar */

.sm-search {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  left: var(--content-left);
  top: var(--search-top-y);
  width: var(--search-w);
  height: var(--search-h);
  cursor: text;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), box-shadow var(--t-hover) var(--e-hover);
}
.sm-search:hover, .sm-search.is-focus { translate: 0 calc(var(--lift) * -1); --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); }
.sm-search-icon {
  position: absolute;
  left: calc(var(--search-icon-x) - var(--search-ic) / 2);
  top: calc(50% - var(--search-ic) / 2);
  --ic: var(--search-ic);
  color: color-mix(in srgb, var(--textOff) 80%, var(--title));
  transition: color var(--t-hover) var(--e-hover);
}
.sm-search:hover .sm-search-icon { color: color-mix(in srgb, var(--textOff) 32%, var(--title)); }
.sm-search.is-focus .sm-search-icon { color: var(--title); }
.sm-search .sm-input {
  position: absolute;
  left: calc(var(--search-text-x) - var(--input-pad));
  top: 0;
  height: 100%;
  right: calc(var(--key-w) + var(--shortcut-right) - var(--key-pad) + var(--key-gap));
  --fs: var(--search-fs);
  --input-shift: calc(var(--search-fs) * -0.0513);
  --input-pad: var(--search-input-pad);
}
.sm-shortcut {
  position: absolute;
  right: calc(var(--shortcut-right) - var(--key-pad));
  top: calc(50% - var(--key-h) / 2);
  height: var(--key-h);
  padding: 0 var(--key-pad);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--textDim) 40%, var(--textOff));
  --fs: var(--shortcut-fs);
  --lh: var(--shortcut-fs);
}

.sm-tool {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  --tool-right: var(--content-right);
  top: var(--search-top-y);
  right: var(--tool-right);
  width: var(--search-h);
  height: var(--search-h);
  border: 0;
  padding: 0;
  cursor: pointer;
  color: color-mix(in srgb, var(--textOff) 80%, var(--title));
  outline: none;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), box-shadow var(--t-hover) var(--e-hover),
    color var(--t-hover) var(--e-hover), inset var(--t-hover) var(--e-hover);
}
.sm-tool:hover, .sm-tool.is-open {
  translate: 0 calc(var(--lift) * -1);
  color: var(--title);
  --glass-top: var(--search-lift-top);
  --glass-bottom: var(--search-lift-bottom);
  inset: calc(var(--search-top-y) - var(--grow-half)) calc(var(--tool-right) - var(--grow-half)) auto auto;
  width: calc(var(--search-h) + var(--grow-half) * 2);
  height: calc(var(--search-h) + var(--grow-half) * 2);
}
.sm-tool:active { inset: calc(var(--search-top-y) + var(--sink)) calc(var(--tool-right) + var(--sink)) auto auto;
  width: calc(var(--search-h) - var(--sink) * 2); height: calc(var(--search-h) - var(--sink) * 2); }
.sm-tool .sm-icon { position: absolute; left: 50%; top: 50%; translate: -50% -50%; --ic: var(--search-ic); }
.sm-tool:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accentLight) 70%, transparent); }

/* DrawAccentButton(): left of the view options; alone in the corner where a page has none */
.sm-accent { --tool-right: calc(var(--content-right) + var(--search-h) + var(--toolbar-gap)); }
.sm-accent.is-alone { --tool-right: var(--content-right); }
.sm-accent-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--accent-ring);
  height: var(--accent-ring);
  margin: calc(var(--accent-ring) / -2) 0 0 calc(var(--accent-ring) / -2);
  border-radius: 50%;
  --ring-l: 79%;
  background: conic-gradient(from 90deg, hsl(0 100% var(--ring-l)), hsl(60 100% var(--ring-l)), hsl(120 100% var(--ring-l)),
    hsl(180 100% var(--ring-l)), hsl(240 100% var(--ring-l)), hsl(300 100% var(--ring-l)), hsl(360 100% var(--ring-l)));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - 0.5px), #000 calc(100% - var(--ring-w)), #000 calc(100% - 0.5px), transparent);
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w) - 0.5px), #000 calc(100% - var(--ring-w)), #000 calc(100% - 0.5px), transparent);
  opacity: 0.55;
  transition: opacity var(--t-hover) var(--e-hover), --ring-l var(--t-hover) var(--e-hover), --ring-w var(--t-hover) var(--e-hover);
}
@property --ring-l { syntax: '<percentage>'; inherits: true; initial-value: 79%; }
@property --ring-w { syntax: '<length>'; inherits: true; initial-value: 1px; }
.sm-accent:hover .sm-accent-ring, .sm-accent.is-open .sm-accent-ring { opacity: 1; --ring-l: 70%; --ring-w: calc(1.9px * var(--s)); }
.sm-accent-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--accent-orb);
  height: var(--accent-orb);
  margin: calc(var(--accent-orb) / -2) 0 0 calc(var(--accent-orb) / -2);
  border-radius: 50%;
  background: linear-gradient(color-mix(in srgb, var(--accent), #fff 8%), color-mix(in srgb, var(--accent), #000 6%));
  transition: transform var(--t-hover) var(--e-hover);
}
.sm-accent:hover .sm-accent-orb, .sm-accent.is-open .sm-accent-orb { transform: scale(1.07); }
.sm-accent:active .sm-accent-orb { transform: scale(0.98); }

/* ---------------------------------------------------------------- animated text input */

.sm-input { position: absolute; }
.sm-input input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0 var(--input-pad);
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: calc(var(--fs) / 1.2101);
  line-height: 1.2101;
  letter-spacing: inherit;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.sm-input input::selection { background: color-mix(in srgb, var(--accent) 35.3%, transparent); color: transparent; }
.sm-input-view {
  position: absolute;
  left: calc(var(--input-pad) / 2);
  right: calc(var(--input-pad) / 2);
  top: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
.sm-input-line {
  position: absolute;
  left: calc(var(--input-pad) / 2);
  top: 50%;
  margin-top: calc(var(--fs) / -2 + var(--input-shift, 0px));
  height: var(--fs);
  --lh: var(--fs);
}
.sm-glyph {
  position: absolute;
  top: 0;
  color: var(--input-color, var(--textOn));
  font-size: calc(var(--fs) / 1.2101);
  line-height: var(--fs);
  white-space: pre;
}
.sm-glyph.is-new { animation: sm-type calc(0.16s * var(--anim)) cubic-bezier(0.33, 1, 0.68, 1) both; }
.sm-glyph.is-ghost { animation: sm-erase calc(0.14s * var(--anim)) cubic-bezier(0.33, 1, 0.68, 1) forwards; }
@keyframes sm-type { from { opacity: 0; translate: 0 var(--type-rise); } }
@keyframes sm-erase { to { opacity: 0; translate: 0 calc(var(--type-rise) * -1); } }
.sm-hint {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--hint-color, var(--textDim));
  font-size: calc(var(--fs) / 1.2101);
  line-height: var(--fs);
  white-space: pre;
  transition: opacity calc(0.18s * var(--anim)) ease-out, translate calc(0.18s * var(--anim)) ease-out;
}
.sm-hint.is-hidden { opacity: 0; translate: var(--hint-shift) 0; transition-duration: calc(0.07s * var(--anim)); }
.sm-caret {
  position: absolute;
  top: calc(var(--fs) * 0.04);
  width: max(1px, var(--caret-w));
  height: calc(var(--fs) * 0.92);
  border-radius: 1px;
  background: var(--title);
  opacity: 0;
  transition: left calc(0.12s * var(--anim)) cubic-bezier(0.25, 1, 0.5, 1), opacity 0.12s;
}
.sm-input.is-focus .sm-caret { opacity: 1; animation: sm-caret 1.1s 0.5s ease-in-out infinite; }
@keyframes sm-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0.1; } }

/* ---------------------------------------------------------------- content */

.sm-grid {
  position: absolute;
  left: var(--content-left);
  top: var(--grid-top);
  width: var(--grid-w);
  height: var(--grid-h);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
  /* ImGui expands the clip rect by Px(4) so lifted cards are not cut at the edges. */
  margin: calc(var(--grid-edge) * -1);
  padding: var(--grid-edge);
  box-sizing: content-box;
  /* DrawScrollFade(): whole cards dissolve at an edge where more of the list waits */
  -webkit-mask-image: var(--sm-mask, none);
  mask-image: var(--sm-mask, none);
}
.sm-grid::-webkit-scrollbar { display: none; }
.sm-grid-inner { position: relative; display: flex; gap: var(--gap-x); align-items: flex-start; }
.sm-col { display: flex; flex-direction: column; gap: var(--gap-y); width: var(--card-w); flex: none; }
/* DrawGrid() empty list: a swaying magnifier over one semibold line */
.sm-empty {
  position: absolute;
  inset: var(--grid-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--empty-gap);
  pointer-events: none;
}
.sm-empty-icon { --ic: var(--empty-ic); color: color-mix(in srgb, var(--title) 58.8%, transparent); }
.sm-empty-text { --fs: var(--empty-fs); --lh: var(--empty-fs); font-weight: 600; color: var(--title); }
.sm-empty-note {
  max-width: calc(var(--grid-w) * 0.62);
  margin-top: calc(var(--empty-gap) * -0.35);
  font-size: calc(var(--note-fs) / 1.2101);
  line-height: 1.45;
  text-align: center;
  color: var(--textOff);
  white-space: normal;
}
/* DrawLens(): a faint plate that glides from card to card under the cursor */
.sm-lens {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  border-radius: var(--lens-r);
  background: color-mix(in srgb, var(--title) 2.75%, transparent);
  pointer-events: none;
  opacity: 0;
}

.sm-scrollbar {
  position: absolute;
  right: calc(var(--content-right) / 2 - var(--thumb-w) / 2);
  width: var(--thumb-w);
  border-radius: 99px;
  background: color-mix(in srgb, var(--icon) 58.8%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(0.3s) cubic-bezier(0.65, 0, 0.35, 1);
}
.sm-scrollbar.is-shown { opacity: 1; transition: none; }

/* ---------------------------------------------------------------- module card */

.sm-card {
  position: relative;
  flex: none;
  outline: none;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), opacity calc(0.2s * var(--anim)) ease-out;
}
.sm-card.is-hot { translate: 0 calc(var(--lift) * -1); }
/* the search result picked with the arrow keys: an accent frame around its header */
.sm-card::after {
  content: '';
  position: absolute;
  left: calc(var(--px2) * -1);
  right: calc(var(--px2) * -1);
  top: calc(var(--px2) * -1);
  height: calc(var(--head-h) + var(--px4));
  border-radius: calc(var(--card-r) + var(--px2));
  box-shadow: inset 0 0 0 var(--px2) var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover) var(--e-hover);
}
.sm-card.is-picked::after { opacity: 1; }
/* DrawCardFill(): the card is the window's own content lifted a little towards white, a little more when hovered */
.sm-plate {
  --glass-top: var(--card-top);
  --glass-bottom: var(--card-bottom);
  inset: 0;
  transition: inset var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover);
}
/* DrawSpotlight(): a wide soft light and a smaller core under the cursor, only on the hovered card */
.sm-spot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle calc(var(--head-h) * 0.9) at var(--mx, 50%) var(--my, 50%), var(--spot-core), transparent),
    radial-gradient(circle calc(var(--head-h) * 2.4) at var(--mx, 50%) var(--my, 50%), var(--spot-wide), transparent);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover);
  pointer-events: none;
}
.sm-card.is-hot .sm-spot { opacity: 1; }
.sm-card.is-hot .sm-plate { inset: calc(var(--grow) * -1); --glass-top: var(--card-top-lift); --glass-bottom: var(--card-bottom-lift); }
.sm-card.is-pressed .sm-plate { inset: calc(var(--sink) - var(--grow)); transition-duration: calc(0.1s * var(--anim)); }
.sm-press-shade {
  position: absolute;
  inset: 0 0 auto;
  height: var(--head-h);
  border-radius: inherit;
  background: rgb(0 0 0 / 0.086);
  opacity: 0;
  transition: opacity calc(0.1s * var(--anim));
  pointer-events: none;
}
.sm-card.is-pressed .sm-press-shade { opacity: 1; }
.sm-glint {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--card-r);
  border-radius: inherit;
  border-top: 1px solid transparent;
  background: linear-gradient(90deg, transparent calc(var(--glint-x) - var(--glint-w)), color-mix(in srgb, var(--title) 27.5%, transparent) var(--glint-x), transparent calc(var(--glint-x) + var(--glint-w))) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
}
.sm-card.is-glint .sm-glint { animation: sm-glint calc(0.7s * var(--anim)) linear forwards; }
@property --glint-x { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
@keyframes sm-glint {
  0% { --glint-x: calc(0% - var(--glint-w)); opacity: 0; }
  50% { opacity: 1; }
  100% { --glint-x: calc(100% + var(--glint-w)); opacity: 0; }
}

.sm-head {
  position: relative;
  height: var(--head-h);
  cursor: pointer;
  outline: none;
  border-radius: var(--card-r);
}
.sm-head:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accentLight) 70%, transparent); }
.sm-card-icon {
  position: absolute;
  left: calc(var(--card-icon-x) - var(--card-ic) / 2);
  top: calc(var(--head-h) / 2 - var(--card-ic) / 2);
  --ic: var(--card-ic);
  color: var(--icon);
  transition: color var(--t-hover) var(--e-hover);
}
.sm-card.is-hot .sm-card-icon { color: var(--title); }
.sm-name-clip {
  position: absolute;
  left: calc(var(--card-text-x) - 2px);
  top: calc(var(--name-top) - var(--lift) - 4px);
  height: calc(var(--name-fs) + var(--lift) + 8px);
  width: calc(var(--name-room) + 2px);
  overflow: hidden;
  transition: width calc(0.4s * var(--anim)) cubic-bezier(0.25, 1, 0.5, 1);
}
.sm-name-plate {
  position: absolute;
  left: calc(var(--card-text-x) - var(--plate-pad));
  top: calc(var(--name-baseline) - var(--name-fs) * 0.6014 - var(--plate-pad-y));
  height: calc(var(--name-fs) * 0.6014 + var(--plate-pad-y) * 2);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, color-mix(in srgb, var(--card) 94%, var(--title)) 96%, transparent);
  opacity: 0;
  pointer-events: none;
}
.sm-name {
  position: absolute;
  left: 2px;
  top: calc(var(--lift) + 4px);
  display: flex;
  align-items: center;
  gap: var(--tag-gap);
}
.sm-name > .sm-text { --fs: var(--name-fs); --lh: var(--name-fs); color: color-mix(in srgb, var(--name) 80%, var(--textOff)); }
/* the category badge next to a name while searching (DrawBadge) */
.sm-name > .sm-text.sm-tag { --fs: var(--tag-fs); --lh: var(--tag-fs); color: var(--textOff); }
.sm-tag {
  --fs: var(--tag-fs);
  --lh: var(--tag-fs);
  padding: var(--tag-pad-y) var(--tag-pad-x);
  border-radius: var(--frame-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  color: var(--textOff);
  translate: 0 calc(var(--name-fs) * -0.05);
}
.sm-desc {
  position: absolute;
  left: calc(var(--card-text-x) + var(--desc-x));
  top: var(--desc-top);
  --fs: var(--desc-fs);
  --lh: var(--desc-line);
  color: var(--textOff);
}
.sm-desc .sm-text { line-height: var(--desc-line); }

/* DrawCardKey(): the bind chip just left of the star; it grows in from 60% and its width follows the key */
.sm-keycap {
  position: absolute;
  right: calc(var(--sw-right) + var(--sw-w) + var(--bind-gap) * 2 + var(--star-box));
  top: calc(var(--head-h) / 2 - var(--bind-h) / 2);
  height: var(--bind-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  overflow: hidden;
  color: var(--title);
  --fs: var(--bind-fs);
  --lh: var(--bind-fs);
  opacity: 0;
  scale: 0.6;
  transform-origin: 50% 50%;
  transition: opacity calc(var(--pop-t) * var(--anim)) var(--pop-e), scale calc(var(--pop-t) * var(--anim)) var(--pop-e),
    width calc(var(--value-t) * var(--anim)) var(--value-e);
  pointer-events: none;
}
.sm-keycap.is-shown { opacity: 1; scale: 1; }
.sm-keycap.is-waiting .sm-roll { color: var(--bindText); animation: sm-pulse 1.2s ease-in-out infinite; }
@keyframes sm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sm-shortcut .sm-text { translate: 0 calc(var(--fs) * -0.0513); }
.sm-keycap .sm-roll-wrap { position: absolute; inset: 0; }

/* the star of a favourite: an outline (brighter on a hovered card) that gives way to a gold star grown from the middle */
.sm-star {
  position: absolute;
  right: calc(var(--sw-right) + var(--sw-w) + var(--bind-gap));
  top: calc(var(--head-h) / 2 - var(--star-box) / 2);
  width: var(--star-box);
  height: var(--star-box);
  border-radius: var(--star-r);
  background: color-mix(in srgb, var(--title) 0%, transparent);
  transition: background var(--t-hover) var(--e-hover);
}
.sm-card.is-star-hot .sm-star { background: color-mix(in srgb, var(--title) 7.1%, transparent); }
.sm-star-svg {
  position: absolute;
  left: calc(50% - var(--star-size) / 2);
  top: calc(50% - var(--star-size) / 2 + var(--px1) * 0.8);
  width: var(--star-size);
  height: var(--star-size);
  overflow: visible;
  transition: scale var(--t-hover) var(--e-hover);
}
.sm-card.is-star-hot .sm-star-svg { scale: 1.1; }
.sm-star-line {
  fill: none;
  stroke: color-mix(in srgb, var(--title) 35.3%, transparent);
  vector-effect: non-scaling-stroke;
  stroke-width: calc(1.5px * var(--s));
  transition: stroke var(--t-hover) var(--e-hover), opacity calc(0.2s * var(--anim));
}
.sm-card.is-hot .sm-star-line { stroke: color-mix(in srgb, var(--title) 58.8%, transparent); }
.sm-card.is-star-hot .sm-star-line { stroke: color-mix(in srgb, var(--title) 92.2%, transparent); }
.sm-star-fill {
  fill: rgb(245 188 66);
  stroke: none;
  scale: 0;
  transform-origin: 0 0;
  transform-box: view-box;
  transition: scale calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e), fill var(--t-hover) var(--e-hover);
}
.sm-card.is-star-hot .sm-star-fill { fill: rgb(255 210 105); }
.sm-card.is-fav .sm-star-fill { scale: 1.06; }
.sm-card.is-fav .sm-star-line { opacity: 0; }

/* Toggle switch: DrawSwitch() */
.sm-switch {
  position: absolute;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  --t: 0;
  --hover: 0;
  background: color-mix(in srgb, var(--switchOff), var(--switch-on) calc(var(--t) * 100%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--knobOff), var(--knobOn) calc(var(--t) * 100%)) calc(8.6% + var(--hover) * 7%), transparent);
  transition: --t calc(0.26s * var(--anim)) cubic-bezier(0.65, 0, 0.35, 1), --hover var(--t-hover) var(--e-hover);
  --switch-on: color-mix(in srgb, var(--accent), var(--accentLight) calc(20% + var(--hover) * 40%));
}
@property --t { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --hover { syntax: '<number>'; inherits: true; initial-value: 0; }
.sm-switch.is-on { --t: 1; }
.sm-card.is-hot .sm-switch, .sm-prow:hover .sm-switch { --hover: 1; }
.sm-knob {
  position: absolute;
  top: 50%;
  --knob-r: calc(var(--sw-h) / 2 - var(--knob-inset) + var(--hover) * 0.5px);
  --stretch: calc(var(--knob-r) * 0.45 * var(--bump, 0));
  height: calc(var(--knob-r) * 2);
  width: calc(var(--knob-r) * 2 + var(--stretch));
  left: calc(var(--sw-h) / 2 + (var(--sw-w) - var(--sw-h)) * var(--t) - var(--knob-r) - var(--stretch) / 2);
  margin-top: calc(var(--knob-r) * -1);
  border-radius: 999px;
  background: color-mix(in srgb, var(--knobOff), var(--knobOn) calc(var(--t) * 100%));
  box-shadow: 0 0.8px 1.8px rgb(0 0 0 / 0.18);
  animation: none;
}
.sm-knob::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: 10%;
  height: 35%;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
}
.sm-switch.is-flipping .sm-knob { animation: sm-knob-stretch calc(0.26s * var(--anim)) linear; }
@property --bump { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes sm-knob-stretch { 0% { --bump: 0; } 50% { --bump: 1; } 100% { --bump: 0; } }
.sm-switch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 var(--switch-on);
}
.sm-switch.is-glow::after { animation: sm-switch-glow calc(0.5s * var(--anim)) ease-out; }
@keyframes sm-switch-glow {
  0% { opacity: 0; box-shadow: 0 0 calc(var(--sw-h) * 0.45) calc(var(--sw-h) * 0.08) color-mix(in srgb, var(--switch-on) 35%, transparent); }
  50% { opacity: 1; box-shadow: 0 0 calc(var(--sw-h) * 0.25) calc(var(--sw-h) * 0.04) color-mix(in srgb, var(--switch-on) 35%, transparent); }
  100% { opacity: 0; box-shadow: 0 0 calc(var(--sw-h) * 0.45) calc(var(--sw-h) * 0.08) color-mix(in srgb, var(--switch-on) 35%, transparent); }
}
.sm-card .sm-switch { right: var(--sw-right); top: calc(var(--head-h) / 2 - var(--sw-h) / 2); }

/* ---------------------------------------------------------------- card body / settings */

.sm-body {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height calc(var(--expand-t) * var(--anim)) var(--expand-e);
}
.sm-body-scroll {
  position: absolute;
  left: var(--body-inset);
  right: var(--body-inset);
  top: var(--body-gap);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity calc(0.25s * var(--anim)) ease-out;
}
.sm-card.is-open .sm-body-scroll { opacity: 1; transition-delay: calc(0.04s * var(--anim)); }
.sm-body-scroll { scrollbar-width: none; }
.sm-body-scroll::-webkit-scrollbar { display: none; }
.sm-settings { display: flex; flex-direction: column; gap: var(--set-gap); }

/* DrawBodyScrollbar(): thin, at the card's right edge, shorter than the panel; thicker under the cursor, draggable */
.sm-bodybar {
  position: absolute;
  top: calc(var(--body-gap) + var(--bar-inset));
  right: calc(var(--body-inset) / 2 - var(--bar-hit) / 2);
  width: var(--bar-hit);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover) var(--e-hover);
  --bar-w: calc(3px * var(--s));
}
.sm-bodybar.is-shown { opacity: 1; pointer-events: auto; }
.sm-bodybar::before, .sm-bodybar-thumb {
  position: absolute;
  left: calc(50% - var(--bar-w) / 2);
  width: var(--bar-w);
  border-radius: 99px;
  transition: width var(--t-hover) var(--e-hover), left var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover);
}
.sm-bodybar::before { content: ''; top: 0; bottom: 0; background: color-mix(in srgb, var(--title) 2.4%, transparent); }
.sm-bodybar-thumb { top: 0; background: color-mix(in srgb, var(--title) 18%, transparent); }
.sm-card:hover .sm-bodybar-thumb { background: color-mix(in srgb, var(--title) 31.4%, transparent); }
.sm-bodybar:hover, .sm-bodybar.is-grab { --bar-w: calc(5px * var(--s)); }
.sm-bodybar:hover::before, .sm-bodybar.is-grab::before { background: color-mix(in srgb, var(--title) 5.5%, transparent); }
.sm-bodybar:hover .sm-bodybar-thumb { background: color-mix(in srgb, var(--title) 51%, transparent); }
.sm-bodybar.is-grab .sm-bodybar-thumb { background: color-mix(in srgb, var(--accent) 86%, transparent); }

/* DrawResetRow(): the last row of an open card; asks once in red before it puts the settings back */
.sm-reset-row { position: relative; height: var(--set-h); flex: none; }
.sm-reset {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--set-h) - var(--reset-h)) / 2 + var(--px2));
  height: var(--reset-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.1%, transparent);
  cursor: pointer;
  outline: none;
  color: var(--soft);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover);
}
.sm-reset:hover, .sm-reset:focus-visible { background: color-mix(in srgb, var(--title) 5.5%, transparent); color: color-mix(in srgb, var(--soft), var(--textOn)); }
.sm-reset.is-confirm { background: rgb(229 72 77 / 0.18); box-shadow: inset 0 0 0 1px rgb(229 72 77 / 0.667); color: rgb(235 118 122); }
.sm-reset-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--reset-gap); }
.sm-reset-icon { --ic: var(--reset-ic); transition: rotate calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e); }
.sm-reset.is-confirm .sm-reset-icon { rotate: -180deg; }
.sm-reset-label { position: relative; height: var(--reset-h); --fs: var(--reset-fs); --lh: var(--reset-fs); transition: width calc(var(--value-t) * var(--anim)) var(--value-e); }
.sm-reset-label .sm-roll { text-align: left; white-space: pre; }

.sm-set {
  position: relative;
  height: var(--set-h);
  border-radius: var(--set-r);
  cursor: pointer;
  flex: none;
  outline: none;
}
.sm-set::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.0235);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover);
}
.sm-set:hover::before, .sm-set.is-hot::before { opacity: 1; }
.sm-set:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accentLight) 60%, transparent); }
.sm-set-label {
  position: absolute;
  left: var(--set-pad);
  top: 50%;
  margin-top: calc(var(--set-label-fs) * -0.5513);
  --fs: var(--set-label-fs);
  --lh: var(--set-label-fs);
  color: var(--textOn);
  pointer-events: none;
}
.sm-pill {
  position: absolute;
  right: var(--set-pad);
  top: calc(50% - var(--pill-h) / 2);
  height: var(--pill-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  transition: background var(--t-hover) var(--e-hover);
  --fs: var(--value-fs);
  --lh: var(--value-fs);
  color: var(--title);
}
.sm-set:hover .sm-pill, .sm-set.is-hot .sm-pill { background: color-mix(in srgb, var(--title) 7.1%, transparent); }
.sm-pill { overflow: hidden; transition: background var(--t-hover) var(--e-hover), width calc(var(--value-t) * var(--anim)) var(--value-e); }
.sm-pill-roll { position: absolute; left: var(--pill-pad); right: calc(var(--pill-pad) * 2 + var(--chev-w)); top: 0; bottom: 0; }
.sm-pill-roll .sm-roll { text-align: left; }
.sm-pill.is-soft .sm-pill-roll { color: var(--soft); }
.sm-pill .sm-roll, .sm-value .sm-roll { top: calc(50% + var(--value-drop)); }
.sm-pill .sm-roll-wrap, .sm-value .sm-roll-wrap { color: inherit; transition: color var(--t-hover) var(--e-hover); }
.sm-value.is-soft { color: var(--soft); }
.sm-value.is-waiting .sm-roll { color: var(--bindText); animation: sm-pulse 1.2s ease-in-out infinite; }
.sm-value .sm-roll-wrap { position: absolute; inset: 0; }
/* Action: a pill that flashes the accent once when clicked */
.sm-action { display: flex; align-items: center; justify-content: center; transition: background var(--t-hover) var(--e-hover), scale calc(var(--press-t) * var(--anim)) var(--press-e); }
.sm-set:active .sm-action { scale: 0.92; }
.sm-action-text { translate: 0 var(--value-drop); }
.sm-action.is-flash { animation: sm-flash calc(0.5s * var(--anim)) ease-in-out; }
@keyframes sm-flash { 50% { background: color-mix(in srgb, var(--accent) 43%, transparent); color: color-mix(in srgb, var(--title), #fff 50%); } }
/* DrawLabel(): the part of a setting's name that matches the search, semibold on an accent mark */
.sm-found {
  font-weight: 600;
  color: var(--window);
  background: var(--accent);
  border-radius: calc(var(--px3) * 1);
  padding: calc(var(--fs) * 0.02) var(--px3);
  margin: 0 calc(var(--px3) * -1);
  box-decoration-break: clone;
}
.sm-chevron {
  position: absolute;
  right: calc(var(--pill-pad) + var(--chev-w) / 2);
  top: 50%;
  width: var(--chev-w);
  height: var(--chev-w);
  margin: calc(var(--chev-w) / -2) calc(var(--chev-w) / -2) 0 0;
  overflow: visible;
  stroke: var(--soft);
  stroke-width: calc(1.5px * var(--s));
  fill: none;
  transition: rotate calc(var(--turn-t) * var(--anim)) var(--turn-e), stroke var(--t-hover);
}
.sm-set.is-open .sm-chevron { rotate: 180deg; stroke: var(--title); }

/* checkbox: DrawCheckbox() */
.sm-check {
  position: absolute;
  right: var(--set-pad);
  top: calc(50% - var(--check) / 2);
  width: var(--check);
  height: var(--check);
}
.sm-check-box {
  position: absolute;
  inset: 0;
  border-radius: var(--check-r);
  background: color-mix(in srgb, var(--title) 3.1%, transparent);
  box-shadow: inset 0 0 0 calc(1.2px * var(--s)) color-mix(in srgb, var(--title) 16.5%, transparent);
  transition: opacity calc(0.22s * var(--anim)) cubic-bezier(0.65, 0, 0.35, 1), box-shadow var(--t-hover);
}
.sm-set:hover .sm-check-box, .sm-pitem:hover .sm-check-box { box-shadow: inset 0 0 0 calc(1.2px * var(--s)) color-mix(in srgb, var(--title) 27.5%, transparent); }
.sm-check-fill {
  position: absolute;
  inset: 0;
  border-radius: var(--check-r);
  background: var(--accent);
  scale: 0;
  opacity: 0;
  transition: scale calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e), opacity calc(0.22s * var(--anim)) cubic-bezier(0.65, 0, 0.35, 1), background var(--t-hover);
}
.sm-set:hover .sm-check-fill, .sm-pitem:hover .sm-check-fill { background: var(--accentLight); }
.sm-check svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #fff;
  stroke-width: 0.11;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  transition: stroke-dashoffset calc(0.15s * var(--anim)) cubic-bezier(0.33, 1, 0.68, 1);
}
.sm-check.is-on .sm-check-box { opacity: 0; }
.sm-check.is-on .sm-check-fill { scale: 1; opacity: 1; }
.sm-check.is-on svg { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(0.28s * var(--anim)) calc(0.12s * var(--anim)) cubic-bezier(0.33, 1, 0.68, 1), opacity 0s calc(0.12s * var(--anim)); }
.sm-check.is-squish { animation: sm-squish calc(0.22s * var(--anim)) linear; }
@keyframes sm-squish { 50% { scale: 0.84; } }
.sm-check.is-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--check-r);
  animation: sm-check-glow calc(0.5s * var(--anim)) ease-out forwards;
  pointer-events: none;
}
@keyframes sm-check-glow {
  0% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 calc(var(--check) * 0.2) calc(var(--check) * 0.05) color-mix(in srgb, var(--accent) 35%, transparent); }
  100% { box-shadow: 0 0 calc(var(--check) * 0.42) calc(var(--check) * 0.1) transparent; }
}

/* slider */
.sm-track {
  position: absolute;
  top: 50%;
  height: var(--track-h);
  margin-top: calc(var(--track-h) / -2);
  border-radius: 99px;
  background: color-mix(in srgb, var(--title) 8.6%, transparent);
  pointer-events: none;
}
.sm-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: var(--accent);
  transition: background var(--t-hover);
}
.sm-set:hover .sm-fill, .sm-set.is-hot .sm-fill, .sm-prow:hover .sm-fill { background: var(--accentLight); }
.sm-knob-dot {
  position: absolute;
  top: 50%;
  width: calc(var(--dot-r) * 2);
  height: calc(var(--dot-r) * 2);
  margin: calc(var(--dot-r) * -1) 0 0 calc(var(--dot-r) * -1);
  border-radius: 50%;
  background: var(--knobOn);
  box-shadow: 0 1px 0 0.5px rgb(0 0 0 / 0.235);
  transition: width calc(0.14s * var(--anim)), height calc(0.14s * var(--anim)), margin calc(0.14s * var(--anim));
}
.sm-set.is-drag .sm-knob-dot, .sm-prow.is-drag .sm-knob-dot { --dot-r: var(--dot-r-active); }
.sm-value {
  position: absolute;
  right: var(--set-pad);
  top: calc(50% - var(--pill-h) / 2);
  height: var(--pill-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  overflow: hidden;
  --fs: var(--value-fs);
  --lh: var(--value-fs);
  color: var(--title);
  transition: width calc(var(--value-t) * var(--anim)) var(--value-e), background var(--t-hover);
}
.sm-value.is-hot, .sm-set:hover .sm-keyval, .sm-set.is-hot .sm-keyval { background: color-mix(in srgb, var(--title) 7.1%, transparent); }
.sm-value.is-bump { animation: sm-bump calc(0.34s * var(--anim)) var(--press-e); }
@keyframes sm-bump { 30% { scale: 1.06 1.12; } }
.sm-roll { position: absolute; left: 0; right: 0; top: 50%; margin-top: calc(var(--fs) * -0.5513); text-align: center; }
.sm-roll.is-in { animation: sm-roll-in calc(0.32s * var(--anim)) var(--roll-e) both; }
.sm-roll.is-out { animation: sm-roll-out calc(0.32s * var(--anim)) var(--roll-e) both; }
@keyframes sm-roll-in { from { translate: 0 calc(var(--roll-shift) * var(--dir)); opacity: 0; } }
@keyframes sm-roll-out { to { translate: 0 calc(var(--roll-shift) * var(--dir) * -1); opacity: 0; } }
.sm-value-edit {
  position: absolute;
  right: var(--set-pad);
  top: calc(50% - var(--pill-h) / 2);
  height: var(--pill-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 7.1%, transparent);
  --fs: var(--base-fs);
  --input-pad: var(--pill-pad-edit);
  --input-color: var(--textOn);
}

.sm-set-text { height: auto; cursor: default; }
.sm-set-text::before { display: none; }
.sm-set-text .sm-set-label { top: var(--text-label-y); margin-top: calc(var(--set-label-fs) * -0.5513); }
.sm-field {
  position: relative;
  margin: var(--chip-top) var(--set-pad) 0;
  height: var(--field-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  --fs: var(--base-fs);
  --input-pad: var(--field-pad);
  transition: background var(--t-hover);
  cursor: text;
}
.sm-field:hover { background: color-mix(in srgb, var(--title) 6.3%, transparent); }
.sm-field.is-focus { background: color-mix(in srgb, var(--title) 7.1%, transparent); }
.sm-field .sm-input { inset: 0; }
.sm-set-text::after { content: ''; display: block; height: var(--field-after); }

/* ---------------------------------------------------------------- popups */

.sm-layer { position: absolute; inset: 0; pointer-events: none; }
/* DrawPanel(): a shadow that starts right at the edge (no light seam under it) and a hairline border */
.sm-popup {
  position: absolute;
  pointer-events: auto;
  padding: var(--pop-pad);
  border-radius: var(--card-r);
  background: linear-gradient(var(--popup-top), var(--popup-bottom));
  box-shadow: 0 var(--px8) calc(var(--px16) * 1.6) rgb(0 0 0 / 0.3), 0 var(--px2) var(--px6) rgb(0 0 0 / 0.18);
  box-sizing: border-box;
}
.sm-popup::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title) 10.2%, transparent);
  pointer-events: none;
}
.sm-stage.is-light .sm-popup { box-shadow: 0 var(--px3) calc(var(--px16) * 1.6) rgb(16 18 24 / 0.1), 0 1px 2px rgb(16 18 24 / 0.06); }

/* BeginOptionScroll(): eight options show; the rest scroll, fading in at the edges, and a pill says how many */
.sm-opt-scroll {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  --fade-a: 1;
  --fade-b: 1;
  -webkit-mask-image: linear-gradient(rgb(0 0 0 / var(--fade-a)), #000 calc(var(--item-h) * 1.4), #000 calc(100% - var(--item-h) * 1.4), rgb(0 0 0 / var(--fade-b)));
  mask-image: linear-gradient(rgb(0 0 0 / var(--fade-a)), #000 calc(var(--item-h) * 1.4), #000 calc(100% - var(--item-h) * 1.4), rgb(0 0 0 / var(--fade-b)));
}
.sm-opt-scroll::-webkit-scrollbar { display: none; }
.sm-more {
  position: absolute;
  left: 50%;
  bottom: calc(var(--pop-pad) + var(--px2));
  height: var(--more-h);
  display: flex;
  align-items: center;
  gap: var(--px4);
  padding: 0 var(--px8) 0 var(--px10);
  border-radius: 99px;
  background: color-mix(in srgb, color-mix(in srgb, var(--content), var(--title) 10%) 92%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--title) 11.8%, transparent);
  color: color-mix(in srgb, var(--soft), var(--title) 40%);
  translate: -50% var(--px6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-hover) var(--e-hover), translate var(--t-hover) var(--e-hover);
}
.sm-more.is-shown { opacity: 1; translate: -50% 0; }
.sm-more-text { --fs: var(--more-fs); --lh: var(--more-fs); }
.sm-more-icon { --ic: var(--more-ic); animation: sm-bob 1.96s ease-in-out infinite; }
@keyframes sm-bob { 0%, 100% { translate: 0 calc(var(--px2) * -0.75); } 50% { translate: 0 calc(var(--px2) * 0.75); } }
.sm-popup-items { position: relative; display: flex; flex-direction: column; gap: var(--item-gap); }
.sm-pitem {
  position: relative;
  height: var(--item-h);
  border-radius: var(--set-r);
  cursor: pointer;
  flex: none;
  outline: none;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
}
.sm-pitem::before, .sm-prow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--title) 3.5%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--title) 8.6%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--title) 3.5%, transparent);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover);
}
.sm-pitem:hover, .sm-pitem:focus-visible { translate: 0 calc(var(--lift) * -1); }
.sm-pitem:hover::before, .sm-pitem:focus-visible::before, .sm-prow:hover::before, .sm-prow.is-drag::before { opacity: 1; }
.sm-pitem-label {
  position: absolute;
  left: var(--item-text-x);
  top: 50%;
  margin-top: calc(var(--item-fs) * -0.5513);
  --fs: var(--item-fs);
  --lh: var(--item-fs);
  color: var(--soft);
  transition: color var(--t-hover);
}
.sm-pitem:hover .sm-pitem-label { color: color-mix(in srgb, var(--soft) 40%, var(--title)); }
.sm-pitem.is-current .sm-pitem-label { color: var(--title); }
.sm-pitem .sm-icon.is-check { position: absolute; right: var(--item-check-right); top: calc(50% - var(--ic) / 2); color: var(--title); }
.sm-pitem .sm-icon.is-lead { position: absolute; left: var(--item-text-x); top: calc(50% - var(--ic) / 2); color: inherit; }
.sm-pitem.has-icon .sm-pitem-label { left: calc(var(--item-text-x) * 2 + var(--view-ic)); }
.sm-pitem.has-icon { color: var(--soft); }
.sm-pitem.has-icon:hover { color: color-mix(in srgb, var(--soft) 40%, var(--title)); }
.sm-pitem.has-icon.is-current { color: var(--title); }
.sm-pitem .sm-check { left: var(--item-text-x); right: auto; width: var(--check-sm); height: var(--check-sm); top: calc(50% - var(--check-sm) / 2); }
.sm-pitem.is-multi .sm-pitem-label { left: calc(var(--item-text-x) + var(--check-sm) + var(--set-pad)); }
.sm-pitem.is-multi.is-current .sm-pitem-label { color: var(--title); }
.sm-pheader {
  height: var(--view-header-h);
  position: relative;
  flex: none;
}
.sm-pheader .sm-text {
  position: absolute;
  left: var(--item-text-x);
  top: 50%;
  margin-top: calc(var(--view-header-fs) * -0.5513);
  --fs: var(--view-header-fs);
  --lh: var(--view-header-fs);
  color: var(--textDim);
}
.sm-psep { position: relative; height: var(--sep-h); flex: none; }
.sm-psep::after {
  content: '';
  position: absolute;
  left: var(--sep-inset);
  right: var(--sep-inset);
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--title) 4.7%, transparent);
}

.sm-prow {
  position: relative;
  height: var(--set-h);
  border-radius: var(--set-r);
  cursor: pointer;
  flex: none;
  outline: none;
}
.sm-prow:focus-visible::before { opacity: 1; }
.sm-prow .sm-set-label { color: var(--textOn); }
.sm-prow.is-switch .sm-set-label { color: color-mix(in srgb, var(--textOff), var(--textOn) calc(var(--t) * 100%)); }
.sm-prow .sm-switch { right: var(--set-pad); top: calc(50% - var(--sw-h) / 2); --sw-w: var(--psw-w); --sw-h: var(--psw-h); --knob-inset: var(--pknob-inset); }
.sm-arrow {
  position: absolute;
  width: calc(var(--arrow) * 0.6);
  height: calc(var(--arrow) * 1.6);
  top: 50%;
  margin-top: calc(var(--arrow) * -0.8);
  overflow: visible;
  fill: none;
  stroke: var(--soft);
  stroke-width: calc(1.4px * var(--s));
  transition: stroke var(--t-hover), translate var(--t-hover) var(--e-hover);
}
.sm-prow:hover .sm-arrow, .sm-pback:hover .sm-arrow { stroke: var(--title); }
.sm-prow.is-nav .sm-arrow { right: var(--set-pad); }
.sm-prow.is-nav:hover .sm-arrow { translate: var(--px2) 0; }
.sm-choice-pill {
  position: absolute;
  right: var(--set-pad);
  top: calc(50% - var(--pill-h) / 2);
  height: var(--pill-h);
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  overflow: hidden;
  transition: background var(--t-hover);
  --fs: var(--value-fs);
  --lh: var(--value-fs);
  color: var(--title);
}
.sm-prow:hover .sm-choice-pill { background: color-mix(in srgb, var(--title) 7.1%, transparent); }
.sm-choice-pill .sm-arrow.is-left { left: var(--choice-arrow-in); }
.sm-choice-pill .sm-arrow.is-right { right: var(--choice-arrow-in); }
.sm-choice-text { position: absolute; left: 0; right: 0; top: 50%; margin-top: calc(var(--value-fs) * -0.5513); text-align: center; }
.sm-choice-text.is-in { animation: sm-choice-in calc(0.32s * var(--anim)) var(--roll-e) both; }
@keyframes sm-choice-in { from { translate: calc(var(--choice-shift) * var(--dir)) 0; opacity: 0; } }
.sm-pback {
  position: relative;
  height: var(--pheader-h);
  flex: none;
  outline: none;
}
.sm-pback-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--pheader-h);
  height: var(--pheader-h);
  border-radius: var(--set-r);
  cursor: pointer;
}
.sm-pback-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--title) 3.5%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--title) 8.6%, transparent);
  opacity: 0;
  transition: opacity var(--t-hover);
}
.sm-pback-btn:hover::before { opacity: 1; }
.sm-pback-btn .sm-arrow { left: calc(50% - var(--arrow) * 0.3); transition: translate var(--t-hover) var(--e-hover); }
.sm-pback-btn:hover .sm-arrow { translate: calc(var(--px2) * -1) 0; stroke: var(--title); }
.sm-pback .sm-text {
  position: absolute;
  left: calc(var(--pheader-h) + var(--px4));
  top: 50%;
  margin-top: calc(var(--set-label-fs) * -0.5513);
  --fs: var(--set-label-fs);
  --lh: var(--set-label-fs);
  color: var(--title);
}

.sm-tooltip {
  position: absolute;
  pointer-events: none;
  padding: var(--tip-pad-y) var(--tip-pad-x);
  border-radius: var(--card-r);
  background: linear-gradient(var(--popup-top), var(--popup-bottom));
  box-shadow: 0 var(--sh-y-lift) var(--sh-blur-lift) rgb(0 0 0 / var(--sh-a-lift));
  color: var(--soft);
  --fs: var(--base-fs);
  --lh: var(--base-fs);
  white-space: nowrap;
  animation: sm-fade calc(0.2s * var(--anim)) cubic-bezier(0.33, 1, 0.68, 1);
}
@keyframes sm-fade { from { opacity: 0; } }

/* ---------------------------------------------------------------- themes page */

.sm-themes { position: relative; }
.sm-theme {
  position: absolute;
  height: var(--theme-h);
  border-radius: var(--card-r);
  background: color-mix(in srgb, var(--card), var(--cardHover) calc(var(--hover) * 100%));
  box-shadow: inset 0 0 0 1px var(--cardBorder);
  cursor: pointer;
  outline: none;
  transition: --hover var(--t-hover) var(--e-hover), translate calc(var(--lift-t) * var(--anim)) var(--lift-e), box-shadow var(--t-slide);
}
.sm-theme:hover { --hover: 1; translate: 0 calc(var(--lift) * -1); }
.sm-theme.is-active { box-shadow: inset 0 0 0 var(--px2) var(--accent); }
.sm-theme:focus-visible { outline: 2px solid color-mix(in srgb, var(--accentLight) 70%, transparent); outline-offset: 2px; }
.sm-theme-preview { position: absolute; left: var(--tp-x); top: var(--tp-x); width: var(--tp-w); height: var(--tp-h); }
.sm-theme-name {
  position: absolute;
  left: var(--tn-x);
  top: var(--tn-y);
  --fs: var(--base-fs);
  --lh: var(--base-fs);
  font-weight: 600;
  color: var(--title);
  overflow: hidden;
}
.sm-theme .sm-icon.is-check { position: absolute; top: var(--tp-x); --ic: var(--tcheck); color: var(--accentLight); }
.sm-swatches { position: absolute; left: var(--tn-x); top: calc(var(--sw-cy) - var(--sw-r)); display: flex; gap: var(--sw-gap); }
.sm-swatches i { width: calc(var(--sw-r) * 2); height: calc(var(--sw-r) * 2); border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--textOn) 15.7%, transparent); display: block; }
.sm-theme-btn {
  position: absolute;
  top: var(--tb-y);
  width: var(--tb-size);
  height: var(--tb-size);
  border-radius: var(--tb-r);
  display: grid;
  place-items: center;
  color: var(--icon);
  background: transparent;
  transition: background var(--t-hover), color var(--t-hover);
  --ic: var(--tb-ic);
}
.sm-theme-btn:hover { background: var(--fieldHover); color: var(--textOn); }
.sm-theme-btn.is-delete:hover { color: rgb(235 110 110); }
.sm-theme-new { display: flex; align-items: center; justify-content: center; gap: var(--px8); color: color-mix(in srgb, var(--textOff), var(--textOn) calc(var(--hover) * 100%)); }
.sm-theme-new .sm-icon { --ic: var(--new-ic); color: color-mix(in srgb, var(--icon), var(--accentLight) calc(var(--hover) * 100%)); }
.sm-theme-new .sm-text { --fs: var(--base-fs); --lh: var(--base-fs); }

.sm-editor-bar { position: absolute; left: var(--content-left); top: var(--grid-top); width: var(--grid-w); height: var(--bar-h); }
.sm-btn {
  position: absolute;
  top: 0;
  height: var(--bar-h);
  padding: 0 var(--px10);
  border-radius: var(--frame-r);
  display: flex;
  align-items: center;
  gap: var(--px8);
  background: var(--field);
  color: var(--textOn);
  cursor: pointer;
  outline: none;
  transition: background var(--t-hover), color var(--t-hover), translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
  --ic: var(--bar-ic);
  --fs: var(--base-fs);
  --lh: var(--base-fs);
}
.sm-btn:hover, .sm-btn:focus-visible { background: var(--fieldHover); translate: 0 calc(var(--lift) * -1); }
.sm-btn.is-delete { color: var(--textOff); }
.sm-btn.is-delete:hover { background: rgb(120 40 44); color: rgb(255 220 220); }
.sm-name-field {
  position: absolute;
  top: 0;
  height: var(--bar-h);
  width: var(--name-field-w);
  border-radius: var(--frame-r);
  background: var(--field);
  --fs: var(--base-fs);
  --input-pad: var(--px12);
}
.sm-name-field:hover, .sm-name-field.is-focus { background: var(--fieldHover); }
.sm-name-field .sm-input { inset: 0; }
.sm-editor {
  position: absolute;
  left: var(--content-left);
  top: calc(var(--grid-top) + var(--bar-h) + var(--px12));
  width: var(--grid-w);
  bottom: var(--grid-bottom);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.sm-editor::-webkit-scrollbar { display: none; }
.sm-editor-cols { display: flex; gap: var(--gap-x); align-items: flex-start; }
.sm-editor-col { width: var(--card-w); flex: none; }
.sm-group-head {
  height: var(--group-h);
  position: relative;
  --fs: var(--group-fs);
  --lh: var(--group-fs);
  font-weight: 600;
  color: var(--textOff);
}
.sm-group-head .sm-text { position: absolute; left: var(--px4); top: var(--px8); }
.sm-group-gap { height: var(--px8); }
.sm-color-row { height: var(--crow-h); position: relative; }
.sm-color-row-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--crow-h) - var(--px4));
  border-radius: var(--crow-r);
  background: var(--card);
}
.sm-color-row .sm-set-label { top: calc((var(--crow-h) - var(--px4)) / 2); left: var(--px12); margin-top: calc(var(--set-label-fs) / -2); }
.sm-hex {
  position: absolute;
  top: var(--px3);
  height: var(--cfield-h);
  width: var(--hex-w);
  right: calc(var(--px4) + var(--swatch-w) + var(--px6));
  border-radius: var(--crow-r);
  background: var(--inset);
  --fs: var(--base-fs);
  --input-pad: var(--px8);
}
.sm-hex .sm-input { inset: 0; }
.sm-swatch {
  position: absolute;
  right: var(--px4);
  top: var(--px3);
  width: var(--swatch-w);
  height: var(--cfield-h);
  border-radius: var(--crow-r);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--textOn) 17.6%, transparent);
  transition: box-shadow var(--t-hover), translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
  outline: none;
}
.sm-swatch:hover, .sm-swatch:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--textOn) 47%, transparent); translate: 0 calc(var(--lift) * -1); }

.sm-picker { width: calc(var(--picker-w) + var(--picker-pad) * 2); padding: var(--picker-pad); border-radius: var(--px12r); }
.sm-sv {
  position: relative;
  width: var(--picker-w);
  height: var(--sv-h);
  border-radius: var(--px8);
  cursor: crosshair;
  touch-action: none;
}
.sm-sv-knob, .sm-hue-knob {
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 0 calc(var(--ring) * 1px) #fff, 0 0 0 calc(var(--ring) * 1px + 1.5px) rgb(0 0 0 / 0.27);
  pointer-events: none;
}
.sm-sv-knob { width: calc(var(--px8) * 2); height: calc(var(--px8) * 2); --ring: 2; }
.sm-hue {
  position: relative;
  margin-top: var(--px14);
  height: var(--hue-h);
  border-radius: 99px;
  background: linear-gradient(90deg, #f00 0%, #ff0 16.7%, #0f0 33.3%, #0ff 50%, #00f 66.7%, #f0f 83.3%, #f00 100%);
  cursor: pointer;
  touch-action: none;
}
.sm-hue::before { content: ''; position: absolute; inset: calc(var(--px4) * -1) 0; }
.sm-hue-knob { width: calc(var(--hue-knob) * 2); height: calc(var(--hue-knob) * 2); top: 50%; --ring: 2.5; }
/* «Готовые цвета»: seven rounded tiles a row; the current one gets a ring */
.sm-picker-label { margin: var(--px14) 0 0 var(--px2); height: calc(var(--px16) + var(--px6)); --fs: var(--more-fs); --lh: var(--more-fs); color: color-mix(in srgb, var(--textDim), var(--textOff)); }
.sm-presets { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--px6); }
.sm-presets button {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: var(--px6);
  cursor: pointer;
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--title) 8.6%, transparent);
  transition: scale var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover);
}
.sm-presets button:hover, .sm-presets button:focus-visible { scale: 1.08; box-shadow: 0 0 0 1px color-mix(in srgb, var(--title) 23.5%, transparent); }
.sm-presets button.is-current { box-shadow: 0 0 0 var(--px3) var(--popup-bottom), 0 0 0 calc(var(--px3) + 1.5px * var(--s)) color-mix(in srgb, var(--title) 78%, transparent); }
.sm-picker-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--px6); margin-top: var(--px12); }
.sm-picker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px6);
  height: calc(var(--px16) * 1.75);
  border: 0;
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  color: var(--textOn);
  cursor: pointer;
  font: inherit;
  --ic: var(--px10);
  --fs: var(--bp-mode-fs);
  --lh: var(--bp-mode-fs);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.sm-picker-btn:hover, .sm-picker-btn:focus-visible { background: color-mix(in srgb, var(--title) 7.8%, transparent); color: var(--title); outline: none; }
.sm-picker .sm-hue { margin-bottom: 0; }
.sm-picker-row { display: flex; gap: var(--px8); height: var(--prow-h); margin-bottom: var(--px12); }
.sm-am-custom .sm-picker-row { margin: var(--px14) 0 0; }
.sm-picker-preview { width: var(--prow-h); border-radius: var(--px8); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title) 11.8%, transparent); flex: none; }

/* Color setting: a swatch over a checkerboard and the HEX in the value column */
.sm-color-pill { display: flex; align-items: center; gap: var(--pill-pad); padding-left: var(--pill-pad); box-sizing: border-box; }
.sm-color-swatch {
  flex: none;
  width: calc(var(--pill-h) - var(--px8));
  height: calc(var(--pill-h) - var(--px8));
  border-radius: var(--px4);
  background: repeating-conic-gradient(color-mix(in srgb, var(--title) 22%, transparent) 0 25%, transparent 0 50%) 0 0 / 50% 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--title) 13.3%, transparent);
  overflow: hidden;
}
.sm-color-fill { width: 100%; height: 100%; }
.sm-color-hex { translate: 0 var(--value-drop); }
.sm-picker-hex { position: relative; flex: 1; border-radius: var(--px8); background: var(--inset); --fs: var(--base-fs); --input-pad: var(--px12); }
.sm-picker-hex .sm-input { inset: 0; }

.sm-toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  max-width: calc(100% - 32px);
  padding: 9px 14px;
  border-radius: 10px;
  background: rgb(10 11 14 / 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 30px rgb(0 0 0 / 0.35);
  color: rgb(214 216 222);
  font: 400 13px/1.4 'Inter', system-ui, sans-serif;
  text-align: center;
  pointer-events: none;
  animation: sm-toast 3.6s ease forwards;
}
@keyframes sm-toast {
  0% { opacity: 0; translate: -50% 8px; }
  8%, 88% { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sm-stage { --anim: 0.001 !important; }
  .sm-caret { animation: none !important; }
}

/* Firefox has no ::-webkit-scrollbar; fall back to its thin scrollbar there. */
@supports (-moz-appearance: none) {
  .sm-body-scroll { scrollbar-width: thin; scrollbar-color: var(--fieldHover) transparent; }
}

/* First-visit pointer (site addition, not part of the client UI). */
.sm-coach-ring {
  position: absolute;
  left: calc(var(--grow) * -1);
  top: calc(var(--grow) * -1);
  width: calc(100% + var(--grow) * 2);
  height: calc(var(--head-h) + var(--grow) * 2);
  border-radius: calc(var(--card-r) + var(--grow));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accentLight) 70%, transparent);
  pointer-events: none;
  z-index: 3;
  animation: sm-coach-ring 1.8s ease-out infinite;
}
@keyframes sm-coach-ring {
  0% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accentLight) 70%, transparent), 0 0 0 0 color-mix(in srgb, var(--accentLight) 35%, transparent); }
  70% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accentLight) 70%, transparent), 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accentLight) 70%, transparent), 0 0 0 0 transparent; }
}
.sm-coach {
  position: absolute;
  right: 0;
  top: calc(var(--head-h) + 10px);
  z-index: 4;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--accentLight);
  color: #0a0c12;
  font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
  animation: sm-coach-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sm-coach::before {
  content: '';
  position: absolute;
  right: 22px;
  top: -5px;
  width: 10px;
  height: 10px;
  rotate: 45deg;
  border-radius: 2px;
  background: inherit;
}
@keyframes sm-coach-in { from { opacity: 0; translate: 0 6px; } }
.sm-coach.is-leaving, .sm-coach-ring.is-leaving { opacity: 0; transition: opacity 0.2s; animation: none; }

/* Floating over the page: the page itself is the world behind the menu. */
.sm-stage.is-floating .sm-world, .sm-stage.is-floating .sm-dim { display: none; }
/* a shadow on the plate, not a filter on the window: a filter would cut the glass off from the page behind */
.sm-stage.is-floating .sm-window-bg { box-shadow: 0 50px 120px -10px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(255 255 255 / 0.03); overflow: hidden; }
.sm-stage.is-floating { overflow: visible; contain: none; }

/* Glassmorphism (g_glassMix): the window lets more of the world through, brighter and more saturated, with a white
   hairline edge and sidebar line; popups become frosted panels (the doubled class outranks the page's own opacity) */
.sm-stage.is-glass .sm-window-bg {
  border-color: rgb(255 255 255 / 0.094);
  backdrop-filter: blur(var(--blur)) saturate(1.35) brightness(1.15);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.35) brightness(1.15);
}
.sm-stage.is-glass:not(.is-light) .sm-window-bg.sm-window-bg::before { opacity: 0.55; }
.sm-stage.is-glass .sm-window-bg::after { background: rgb(255 255 255 / 0.055); }
.sm-stage.is-glass .sm-popup, .sm-stage.is-glass .sm-tooltip, .sm-stage.is-glass .sm-mtoast {
  backdrop-filter: blur(calc(var(--blur) * 0.7)) saturate(1.35);
  -webkit-backdrop-filter: blur(calc(var(--blur) * 0.7)) saturate(1.35);
}

/* ---------------------------------------------------------------- accent panel (DrawAccentMenu) */

.sm-accent-menu {
  border-radius: var(--px12);
  display: flex;
  flex-direction: column;
  --am-label: color-mix(in srgb, var(--textDim), var(--textOff));
  --am-fs: var(--more-fs);
}
.sm-am-head { position: relative; display: flex; align-items: center; height: var(--am-head); margin-bottom: var(--am-head-gap); }
.sm-am-orb {
  flex: none;
  width: var(--px8);
  height: var(--px8);
  margin: 0 calc(var(--am-title-x) - var(--px8) - var(--px2)) 0 var(--px2);
  border-radius: 50%;
  background: linear-gradient(color-mix(in srgb, var(--accent), #fff 8%), color-mix(in srgb, var(--accent), #000 6%));
}
.sm-am-title { --fs: var(--am-title-fs); --lh: var(--am-title-fs); font-weight: 600; color: var(--title); }
.sm-am-hex {
  position: relative;
  margin-left: auto;
  height: var(--more-h);
  border-radius: 99px;
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  color: var(--soft);
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --fs: var(--am-fs);
  --lh: var(--am-fs);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover), width var(--t-hover) var(--e-hover);
}
.sm-am-hex:hover, .sm-am-hex:focus-visible { background: color-mix(in srgb, var(--title) 7.1%, transparent); color: var(--title); }
.sm-am-hex.is-copied { color: var(--success); }
.sm-am-reset {
  flex: none;
  width: 0;
  height: var(--am-head);
  margin-left: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--soft);
  cursor: pointer;
  outline: none;
  opacity: 0;
  scale: 0.6;
  overflow: hidden;
  --ic: var(--px9);
  transition: width var(--t-hover) var(--e-hover), margin var(--t-hover) var(--e-hover), opacity var(--t-hover) var(--e-hover),
    scale var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.sm-am-reset.is-shown { width: var(--am-head); margin-left: var(--px6); opacity: 1; scale: 1; }
.sm-am-reset:hover { background: color-mix(in srgb, var(--title) 5.5%, transparent); color: var(--title); }
.sm-am-reset .sm-icon { transition: rotate var(--t-hover) var(--e-hover); }
.sm-am-reset:hover .sm-icon { rotate: -40deg; }

.sm-am-ribbon {
  position: relative;
  height: var(--am-ribbon);
  margin-bottom: var(--am-ribbon-gap);
  border-radius: 99px;
  background: var(--ribbon);
  cursor: pointer;
  touch-action: none;
}
.sm-am-ribbon::before { content: ''; position: absolute; inset: calc(var(--px6) * -1) 0; }
.sm-am-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--am-ribbon) / 2 + (100% - var(--am-ribbon)) * var(--hue));
  width: calc(var(--am-ribbon) + var(--px6));
  height: calc(var(--am-ribbon) + var(--px6));
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--knobOn);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  pointer-events: none;
  transition: scale var(--t-hover) var(--e-hover);
}
.sm-am-knob::after {
  content: '';
  position: absolute;
  inset: var(--px3);
  border-radius: 50%;
  background: linear-gradient(color-mix(in srgb, var(--knob-color), #fff 8%), color-mix(in srgb, var(--knob-color), #000 6%));
}
.sm-am-ribbon:hover .sm-am-knob { scale: 1.1; }
.sm-am-ribbon.is-grab .sm-am-knob { scale: 1.18; }
/* the magnifier balloon over the knob while it is dragged */
.sm-am-balloon {
  position: absolute;
  left: calc(var(--am-ribbon) / 2 + (100% - var(--am-ribbon)) * var(--hue));
  bottom: calc(100% + var(--px6));
  width: calc(var(--px12) * 2 - var(--px2));
  height: calc(var(--px12) * 2 - var(--px2));
  translate: -50% 0;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--knobOn);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
  scale: 0;
  transform-origin: 0 100%;
  pointer-events: none;
  transition: scale calc(var(--press-t) * var(--anim)) var(--press-e);
}
.sm-am-balloon::after { content: ''; position: absolute; inset: var(--px2); border-radius: 50%; background: var(--knob-color); }
.sm-am-ribbon.is-grab .sm-am-balloon { scale: 1; }

.sm-am-label { display: flex; align-items: center; justify-content: space-between; height: var(--am-label-h); margin-bottom: var(--px4); padding: 0 var(--px2); --fs: var(--am-fs); --lh: var(--am-fs); color: var(--am-label); }
.sm-am-name { color: color-mix(in srgb, var(--soft), var(--title) 45%); }
.sm-am-grid { position: relative; display: grid; grid-template-columns: repeat(8, var(--cell)); grid-auto-rows: var(--cell); align-self: center; }
.sm-am-slot { position: relative; display: grid; place-items: center; cursor: pointer; outline: none; }
.sm-am-dot {
  position: relative;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: linear-gradient(color-mix(in srgb, var(--dot-color), #fff 8%), color-mix(in srgb, var(--dot-color), #000 6%));
  transition: transform 0.12s cubic-bezier(0.25, 1, 0.5, 1), box-shadow var(--t-hover) var(--e-hover);
}
.sm-am-slot.is-selected .sm-am-dot { box-shadow: 0 0 0 var(--px3) color-mix(in srgb, var(--dot-color) 14%, transparent); }
.sm-am-slot:active .sm-am-dot { scale: 0.9; }
.sm-am-mark { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 255 255 / 0.94); --ic: var(--more-ic); }
.sm-am-slot.is-light .sm-am-mark { color: rgb(20 22 30 / 0.9); }
.sm-am-mark .sm-icon { grid-area: 1 / 1; transition: opacity var(--t-hover) var(--e-hover), scale calc(var(--press-t) * var(--anim)) var(--press-e); }
.sm-am-check { opacity: 0; scale: 0.4; stroke-width: 2.4; }
.sm-am-slot.is-selected .sm-am-check { opacity: 1; scale: 1.2; }
.sm-am-slot.is-selected .sm-am-undo { opacity: 0; }
.sm-am-ring {
  position: absolute;
  left: calc((var(--cell) - var(--ring)) / 2);
  top: calc((var(--cell) - var(--ring)) / 2);
  width: var(--ring);
  height: var(--ring);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(1.5px * var(--s)) color-mix(in srgb, var(--title) 78%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: translate calc(var(--slide-t) * var(--anim)) var(--slide-e), opacity var(--t-hover) var(--e-hover);
}
.sm-am-ring.is-shown { opacity: 1; }
.sm-am-burst { position: absolute; left: 50%; top: 50%; width: var(--dot); height: var(--dot); margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: 50%; box-shadow: inset 0 0 0 calc(2px * var(--s)) var(--burst-color); pointer-events: none; }
.sm-am-grid + .sm-am-label { margin-top: var(--px12); }
.sm-am-recent { display: grid; grid-template-columns: repeat(8, var(--cell)); height: var(--am-recent-h); align-self: center; }
.sm-am-recent .sm-am-dot { width: calc(var(--px8) * 1.5); height: calc(var(--px8) * 1.5); }
.sm-am-recent .sm-am-slot:hover .sm-am-dot { transform: scale(1.3) translateY(calc(var(--px2) * -0.75)); }
.sm-am-recent .sm-am-slot.is-selected .sm-am-dot { box-shadow: 0 0 0 var(--px3) var(--popup-bottom), 0 0 0 calc(var(--px3) + 1.3px * var(--s)) color-mix(in srgb, var(--title) 78%, transparent); }

.sm-am-fine {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--px8);
  height: var(--am-fine-h);
  margin-top: var(--px12);
  padding: 0 var(--px10);
  border-radius: var(--set-r);
  cursor: pointer;
  outline: none;
  color: var(--soft);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.sm-am-fine:hover, .sm-am-fine:focus-visible { background: color-mix(in srgb, var(--title) 3.5%, transparent); color: var(--title); }
.sm-am-fine-icon { --ic: var(--px10); }
.sm-am-fine-text { --fs: var(--set-label-fs); --lh: var(--set-label-fs); color: var(--textOn); }
.sm-am-fine-chev { --ic: var(--px9); margin-left: auto; transition: rotate calc(var(--slide-t) * var(--anim)) var(--slide-e); }
.sm-am-fine.is-open .sm-am-fine-chev { rotate: 180deg; }
.sm-am-custom { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows calc(var(--slide-t) * var(--anim)) var(--slide-e), opacity var(--t-hover) var(--e-hover); }
.sm-am-custom.is-open { grid-template-rows: 1fr; opacity: 1; }
.sm-am-custom-inner { min-height: 0; overflow: hidden; }
.sm-am-custom .sm-sv { width: 100%; margin-top: var(--px12); }
.sm-am-hint { margin-top: var(--px10); --fs: var(--am-hint-fs); --lh: var(--am-hint-fs); text-align: center; color: color-mix(in srgb, var(--am-label) 85%, transparent); }

/* ---------------------------------------------------------------- bind panel (DrawBindPanel) */

.sm-bindpanel { display: flex; flex-direction: column; }
.sm-bp-title { height: var(--bp-title-h); display: flex; align-items: center; padding-left: var(--px2); margin-bottom: var(--px8); --fs: var(--bp-fs); --lh: var(--bp-fs); font-weight: 600; color: var(--title); }
.sm-bp-key {
  position: relative;
  height: var(--bp-key-h);
  border-radius: var(--px10);
  background: color-mix(in srgb, var(--title) 3.1%, transparent);
  cursor: pointer;
  outline: none;
  color: var(--soft);
  --fs: var(--bp-fs);
  --lh: var(--bp-fs);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover), scale calc(var(--press-t) * var(--anim)) var(--press-e);
}
.sm-bp-key:hover { background: color-mix(in srgb, var(--title) 5.1%, transparent); }
.sm-bp-key:active { scale: 0.985; }
.sm-bp-key.is-named { color: var(--title); font-weight: 600; }
.sm-bp-key.is-listening { color: var(--title); background: color-mix(in srgb, var(--accent) 9.4%, transparent); animation: sm-listen 1.2s ease-in-out infinite; }
@keyframes sm-listen {
  0%, 100% { box-shadow: inset 0 0 0 calc(1.2px * var(--s)) var(--accent); }
  50% { box-shadow: inset 0 0 0 calc(1.2px * var(--s)) color-mix(in srgb, var(--accent) 45%, transparent); }
}
.sm-bp-key.is-listening .sm-roll { animation: sm-pulse 1.2s ease-in-out infinite; }
.sm-bp-key-text { position: absolute; inset: 0; }
.sm-bp-clear {
  position: absolute;
  right: var(--px11);
  top: calc(50% - var(--bp-clear) / 2);
  width: var(--bp-clear);
  height: var(--bp-clear);
  border-radius: var(--px6);
  display: grid;
  place-items: center;
  color: var(--soft);
  opacity: 0;
  --ic: var(--px10);
  transition: opacity var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.sm-bp-key.is-bound:hover .sm-bp-clear { opacity: 1; }
.sm-bp-clear:hover { background: color-mix(in srgb, var(--title) 6.3%, transparent); color: var(--title); }
.sm-bp-seg {
  position: relative;
  display: flex;
  height: var(--bp-seg-h);
  margin-top: var(--px8);
  padding: var(--px3);
  border-radius: var(--px10);
  background: color-mix(in srgb, var(--title) 3.1%, transparent);
  box-sizing: border-box;
}
.sm-bp-seg-knob {
  position: absolute;
  left: var(--px3);
  top: var(--px3);
  bottom: var(--px3);
  width: calc(50% - var(--px3));
  border-radius: var(--px8);
  background: color-mix(in srgb, var(--accent) 31.4%, transparent);
  transition: translate calc(var(--check-grow-t) * var(--anim)) var(--slide-e);
}
.sm-stage.is-light .sm-bp-seg-knob { background: color-mix(in srgb, var(--accent) 23.5%, transparent); }
.sm-bp-seg.is-hold .sm-bp-seg-knob { translate: 100% 0; }
.sm-bp-mode { position: relative; flex: 1; display: grid; place-items: center; cursor: pointer; outline: none; --fs: var(--bp-mode-fs); --lh: var(--bp-mode-fs); color: var(--soft); transition: color var(--t-hover) var(--e-hover); }
.sm-bp-mode:hover { color: var(--textOn); }
.sm-bp-mode.is-on { color: var(--title); font-weight: 600; }
.sm-bp-desc { position: relative; height: var(--bp-desc-h); margin-top: var(--px8); --fs: var(--more-fs); --lh: var(--more-fs); color: var(--textDim); overflow: hidden; }

/* DrawUndoToast(): a glass pill over the bottom of the list */
.sm-mtoast {
  position: absolute;
  height: var(--toast-h);
  display: flex;
  align-items: center;
  gap: var(--px10);
  padding: 0 var(--px16);
  border-radius: 99px;
  background: linear-gradient(var(--popup-top), var(--popup-bottom));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title) 7%, transparent), 0 var(--px6) var(--px16) rgb(0 0 0 / 0.25);
  white-space: nowrap;
  pointer-events: none;
  translate: -50% 0;
}
.sm-mtoast-icon { --ic: var(--toast-ic); color: color-mix(in srgb, var(--textOff), var(--title) 35%); }
.sm-mtoast-text { --fs: var(--toast-fs); --lh: var(--toast-fs); color: var(--title); }

/* ---------------------------------------------------------------- Косметика: the wardrobe (ClickGuiWardrobe.inl) */

.sm-ward, .sm-friends {
  position: absolute;
  left: var(--content-left);
  top: var(--grid-top);
  width: var(--grid-w);
  height: var(--grid-h);
}
/* DrawWardrobePanel(): the module card's own fill, a little lighter under the cursor */
.sm-wfill { --glass-top: var(--card-top); --glass-bottom: var(--card-bottom); --glass-r: var(--card-r); }
.sm-wtab:hover .sm-wfill, .sm-wchip:hover .sm-wfill { --glass-top: var(--card-top-lift); --glass-bottom: var(--card-bottom-lift); }
/* a plain button: the classes below give each its look */
:where(.sm-ward, .sm-friends, .sm-fbar) button { font: inherit; color: inherit; border: 0; padding: 0; background: none; outline: none; cursor: pointer; }
.sm-ward button:focus-visible, .sm-friends button:focus-visible, .sm-fbar button:focus-visible, .sm-wtile:focus-visible, .sm-fcard:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accentLight) 70%, transparent);
}

/* DrawSlotTabs() */
.sm-wtab {
  position: absolute;
  border-radius: var(--card-r);
  color: var(--textOff);
  transition: color var(--t-hover) var(--e-hover);
}
.sm-wtab > .sm-wfill { inset: 0; }
.sm-wtab:hover { color: var(--textOn); }
.sm-wtab.is-active { color: var(--title); }
.sm-wtab-on {
  position: absolute;
  inset: 0;
  border-radius: var(--set-r);
  background: color-mix(in srgb, var(--accent) 27.5%, transparent);
  box-shadow: inset 0 0 0 calc(1.5px * var(--s) / 0.75) var(--accent);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover);
}
.sm-wtab.is-active .sm-wtab-on { opacity: 1; }
.sm-wtab > .sm-clip { border-radius: var(--set-r); }
.sm-wtab-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--px7, calc(var(--px6) + var(--px1)));
}
.sm-wtab-icon { --ic: calc(var(--px16) - var(--px1)); }
.sm-wtab-label { --fs: var(--fz13); --lh: var(--fs); }
.sm-wtab-dot {
  position: absolute;
  right: calc(var(--px10) - var(--px1));
  top: calc(var(--px10) - var(--px1));
  width: calc(var(--px6) + 0.4px);
  height: calc(var(--px6) + 0.4px);
  margin: calc(var(--px3) * -1) calc(var(--px3) * -1) 0 0;
  border-radius: 50%;
  background: var(--success);
  scale: 0;
  transition: scale calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e);
}
.sm-wtab.is-worn .sm-wtab-dot { scale: 1; }

/* the stages: a canvas for the scene, HTML for the words over it */
.sm-stage3d { position: absolute; border-radius: var(--card-r); cursor: grab; touch-action: none; }
.sm-stage3d:active { cursor: grabbing; }
.sm-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; }
.sm-stage-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--friend, var(--accent)) 19.6%, transparent);
  pointer-events: none;
}
.sm-stage-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--px44) + var(--px16) + var(--px10));
  border-radius: 0 0 var(--card-r) var(--card-r);
  background: rgb(0 0 0 / 0.47);
  pointer-events: none;
}
.sm-stage-title {
  position: absolute;
  left: calc(var(--px16) + var(--px2));
  bottom: calc(var(--px16) * 2);
  --fs: var(--fz18);
  --lh: var(--fs);
  margin-bottom: calc(var(--fs) * -0.1994);
  font-weight: 600;
  color: rgb(244 246 250);
}
.sm-stage-sub {
  position: absolute;
  left: calc(var(--px16) + var(--px2));
  bottom: calc(var(--px16) + var(--px1));
  --fs: var(--fz12-5);
  --lh: var(--fs);
  margin-bottom: calc(var(--fs) * -0.5513);
  color: rgb(190 196 208);
}
.sm-stage-chip {
  position: absolute;
  left: var(--px12);
  top: var(--px12);
  height: calc(var(--px12) * 2);
  max-width: calc(100% - var(--px12) * 2);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 calc(var(--px8) - var(--px1)) 0 calc(var(--px16) + var(--px6) + var(--px1));
  border-radius: 99px;
  background: rgb(0 0 0 / 0.431);
  color: rgb(196 202 218);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover);
  pointer-events: none;
  box-sizing: border-box;
}
.sm-stage-chip.is-shown { opacity: 1; }
.sm-stage-chip-dot {
  position: absolute;
  left: calc(var(--px12) + var(--px1));
  top: 50%;
  width: var(--px6);
  height: var(--px6);
  margin: calc(var(--px3) * -1);
  border-radius: 50%;
  background: var(--friend, var(--accent));
}
.sm-stage-chip.is-try .sm-stage-chip-dot { background: var(--success); }
.sm-stage-chip-text { --fs: var(--fz12); --lh: var(--fs); white-space: pre; }
.sm-stage.is-light .sm-stage-chip { background: rgb(255 255 255 / 0.925); color: color-mix(in srgb, var(--textOff), var(--title) 40%); }

/* the bar under the stage */
.sm-wbar .sm-wbar-slot {
  position: absolute;
  left: var(--px14);
  top: 32%;
  --fs: var(--fz11-5);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.5513);
  color: var(--textDim);
}
.sm-wbar .sm-wbar-name {
  position: absolute;
  left: var(--px14);
  top: 66%;
  --fs: var(--fz14);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.5513);
  font-weight: 600;
  color: var(--textOff);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-hover) var(--e-hover);
}
.sm-wbar .sm-wbar-name.is-on { color: var(--title); }

/* DrawWardrobeButton(): a flat pill (title colour at 4%, 8% hovered) or a glass button */
.sm-wbtn {
  position: absolute;
  border-radius: var(--pill-r);
  color: var(--textOn);
  transition: color var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover), translate var(--t-hover) var(--e-hover);
  --fs: var(--value-fs);
  --lh: var(--value-fs);
}
.sm-wbtn.is-flat { background: color-mix(in srgb, var(--title) 3.9%, transparent); }
.sm-wbtn.is-flat:hover { background: color-mix(in srgb, var(--title) 7.8%, transparent); color: var(--title); }
.sm-wbtn.is-flat.is-on { background: color-mix(in srgb, var(--accent) 27.5%, transparent); color: var(--title); }
.sm-wbtn:active { scale: 0.97; }
.sm-wbtn .sm-icon { --ic: calc(var(--px16) - var(--px1)); }
.sm-wbtn.is-icon .sm-icon { position: absolute; left: 50%; top: 50%; margin: calc(var(--ic) / -2); }
.sm-wbtn .sm-roll-wrap { position: absolute; inset: 0; }
.sm-wbtn .sm-roll { --fs: var(--value-fs); --lh: var(--value-fs); }
.sm-wbtn-in {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px6) + var(--px1));
}
.sm-wbtn-in.is-left { justify-content: flex-start; padding-left: var(--px12); }
.sm-wbtn.is-glass { height: 100%; top: 0; border-radius: var(--card-r); }
.sm-wbtn-glass { inset: 0; --glass-top: var(--search-top); --glass-bottom: var(--search-bottom); }
.sm-wbtn.is-glass:hover { color: var(--title); }
.sm-wbtn.is-glass:hover .sm-wbtn-glass { --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); }

/* the gallery panel and its scrolling contents */
.sm-wscroll {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.sm-wscroll::-webkit-scrollbar { display: none; }
.sm-wgallery { position: relative; }
.sm-wfield {
  position: absolute;
  border-radius: var(--pill-r);
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  cursor: text;
  transition: background var(--t-hover) var(--e-hover);
}
.sm-wfield:hover { background: color-mix(in srgb, var(--title) 6.3%, transparent); }
.sm-wfield:has(.is-focus) { background: color-mix(in srgb, var(--title) 7.1%, transparent); }
.sm-wfield-icon {
  position: absolute;
  left: var(--px12);
  top: 50%;
  --ic: calc(var(--px16) - var(--px1));
  margin-top: calc(var(--ic) / -2);
  color: color-mix(in srgb, var(--textOff), var(--title) 20%);
}
.sm-wfield .sm-input {
  left: calc(var(--px12) + var(--px16) - var(--px1) + var(--px8) - var(--px4));
  right: var(--px4);
  top: 0;
  bottom: 0;
  --fs: var(--value-fs);
  --input-pad: var(--px4);
}
.sm-wrandom { border-radius: var(--pill-r); }
.sm-wfilters { position: absolute; left: 0; right: 0; }
.sm-wfilter {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 99px;
  background: color-mix(in srgb, var(--title) 2.35%, transparent);
  color: var(--textOff);
  --fs: var(--value-fs);
  --lh: var(--value-fs);
  transition: background var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.sm-wfilter:hover { background: color-mix(in srgb, var(--title) 5.5%, transparent); color: var(--textOn); }
.sm-wfilter.is-on { background: color-mix(in srgb, var(--accent) 27.5%, transparent); color: var(--title); }
.sm-wfilter-label { position: absolute; left: var(--px12); top: 50%; margin-top: calc(var(--fs) * -0.5513); }
.sm-wfilter-star ~ .sm-wfilter-label { left: calc(var(--px12) + var(--px16)); }
.sm-wfilter .sm-roll-wrap { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.sm-wfilter .sm-roll { text-align: left; }
.sm-stage .sm-wfilter-star {
  position: absolute;
  left: calc(var(--px12) - var(--px1));
  top: 50%;
  width: var(--px12);
  height: var(--px12);
  margin-top: calc(var(--px6) * -1);
  fill: rgb(245 188 66);
  stroke: none;
}
.sm-wtiles { position: absolute; left: 0; right: 0; }
.sm-wempty {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: calc(var(--fs) * -0.5513);
  --fs: var(--value-fs);
  --lh: var(--fs);
  text-align: center;
  color: var(--textDim);
}

/* DrawGallery() drawTile() */
.sm-wtile {
  position: absolute;
  width: var(--tile);
  height: var(--tile);
  border-radius: var(--set-r);
  cursor: pointer;
  outline: none;
  transition: scale calc(var(--press-t) * var(--anim)) var(--press-e);
}
.sm-wtile:active:not(.is-star-hot) { scale: 0.96; }
.sm-wtile-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--title) 2.75%, transparent);
  transition: background var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover);
}
.sm-wtile:hover .sm-wtile-bg { background: color-mix(in srgb, var(--title) 5.5%, transparent); }
.sm-wtile.is-worn .sm-wtile-bg {
  background: color-mix(in srgb, color-mix(in srgb, var(--accent) 15.7%, transparent), color-mix(in srgb, var(--title) 2.75%, transparent) 30%);
  box-shadow: inset 0 0 0 calc(1.5px * var(--s) / 0.75) var(--accent);
}
.sm-wtile-img {
  position: absolute;
  left: calc(var(--tile) / 107);
  top: calc(var(--tile) / 107);
  width: calc(var(--tile) * 105 / 107);
  height: calc(var(--tile) * 85 / 107);
  pointer-events: none;
  user-select: none;
}
.sm-wtile-label {
  position: absolute;
  left: var(--px4);
  right: var(--px4);
  bottom: calc(var(--label-h) / 2 + var(--px1));
  margin-bottom: calc(var(--fs) * -0.5513);
  --fs: var(--fz12);
  --lh: var(--fs);
  text-align: center;
  color: var(--textOff);
  transition: color var(--t-hover) var(--e-hover);
}
.sm-wtile:hover .sm-wtile-label { color: var(--textOn); }
.sm-wtile.is-worn .sm-wtile-label { color: var(--title); }
/* DrawSoftStar(): only an outline on the hovered tile, a gold star once favourited */
.sm-wtile-star {
  position: absolute;
  right: var(--px2);
  top: var(--px2);
  width: calc(var(--px10) * 2);
  height: calc(var(--px10) * 2);
}
.sm-wtile-star .sm-star-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  scale: 0.75;
  overflow: visible;
  transition: scale var(--t-hover) var(--e-hover);
}
.sm-wtile .sm-star-line {
  fill: none;
  stroke: color-mix(in srgb, var(--title) 55%, transparent);
  stroke-width: calc(1.3px * var(--s) / 0.75);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover), stroke var(--t-hover);
}
.sm-wtile:hover .sm-star-line { opacity: 1; }
.sm-wtile.is-star-hot .sm-star-line { stroke: color-mix(in srgb, var(--title) 90%, transparent); }
.sm-wtile.is-star-hot .sm-star-svg { scale: 0.84; }
.sm-wtile .sm-star-fill {
  fill: rgb(245 188 66);
  transform-origin: 0 0;
  scale: 0;
  transition: scale calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e);
}
.sm-wtile.is-fav .sm-star-fill { scale: 1; }
.sm-wtile.is-fav .sm-star-line { opacity: 0; }

/* the slot's settings (the gear) */
.sm-wset-title {
  position: relative;
  height: calc(var(--px16) * 2 + var(--px2));
  --fs: var(--fz15);
  --lh: calc(var(--px14) * 2);
  font-weight: 600;
  color: var(--title);
  padding-left: var(--px2);
}
.sm-wset-none { --fs: var(--fz13); --lh: calc(var(--px10) * 4); color: var(--textDim); }

/* DrawWornChips() */
.sm-wfoot { position: absolute; }
.sm-wfoot-head {
  position: absolute;
  left: 0;
  top: 50%;
  --fs: var(--fz12-5);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.5513);
  color: var(--textDim);
}
.sm-wchips { position: absolute; top: 0; bottom: 0; right: 0; }
.sm-wchips-none, .sm-wchips-more {
  position: absolute;
  top: 50%;
  --fs: var(--fz12-5);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.5513);
  color: var(--textOff);
}
.sm-wchips-more { color: var(--textDim); }
.sm-wchip { position: absolute; top: 0; height: 100%; border-radius: var(--card-r); color: var(--textOn); }
.sm-wchip > .sm-wfill { inset: 0; }
.sm-wchip-thumb { position: absolute; left: var(--px4); top: var(--px4); background-repeat: no-repeat; }
.sm-wchip-name {
  position: absolute;
  left: calc(var(--px40, calc(var(--px16) * 2 + var(--px8))) - var(--px4) + var(--px6) + var(--px1));
  top: 50%;
  --fs: var(--fz12-5);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.5513);
}
.sm-wchip-x {
  position: absolute;
  right: var(--px10);
  top: 50%;
  width: var(--px12);
  height: var(--px12);
  margin-top: calc(var(--px6) * -1);
  color: var(--textOff);
  transition: color var(--t-hover) var(--e-hover);
}
.sm-wchip-x .sm-icon { --ic: var(--px12); }
.sm-wchip-x:hover { color: var(--title); }

/* «Гардероб ▾» in the top bar */
.sm-viewbtn {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  --glass-r: var(--card-r);
  top: var(--search-top-y);
  right: var(--tool-right);
  height: var(--search-h);
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: color-mix(in srgb, var(--textOn), var(--title) 40%);
  outline: none;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), box-shadow var(--t-hover) var(--e-hover), color var(--t-hover) var(--e-hover);
}
.sm-viewbtn:hover, .sm-viewbtn.is-open { translate: 0 calc(var(--lift) * -1); color: var(--title); --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); }
.sm-viewbtn-icon { position: absolute; left: var(--px16); top: 50%; width: var(--view-ic); height: var(--view-ic); margin-top: calc(var(--view-ic) / -2); }
.sm-viewbtn-icon .sm-icon { --ic: var(--view-ic); }
.sm-viewbtn > .sm-roll-wrap { position: absolute; left: calc(var(--px16) + var(--view-ic) + var(--px8) + var(--px1)); right: calc(var(--px14) * 2 + var(--px10)); top: 0; bottom: 0; overflow: hidden; }
.sm-viewbtn .sm-roll { --fs: var(--sort-fs); --lh: var(--fs); text-align: left; }
.sm-viewbtn-chev {
  position: absolute;
  right: var(--px14);
  top: 50%;
  --ic: var(--px14);
  margin-top: calc(var(--ic) / -2);
  color: var(--textOff);
  transition: rotate var(--t-hover) var(--e-hover), color var(--t-hover);
}
.sm-viewbtn:hover .sm-viewbtn-chev { color: var(--title); }
.sm-viewbtn.is-open .sm-viewbtn-chev { rotate: 180deg; }
.sm-pitem.is-off { opacity: 0.55; }

/* ---------------------------------------------------------------- Друзья (ClickGuiFriends.inl) */

.sm-fbar { position: absolute; inset: 0 0 auto; height: 0; }
.sm-fbar > * { position: absolute; }
.sm-fbar.is-profile .sm-ffield, .sm-fbar.is-profile .sm-fadd, .sm-fbar.is-profile .sm-fnotice, .sm-fbar.is-profile .sm-fsort,
.sm-fbar:not(.is-profile) .sm-fback, .sm-fbar:not(.is-profile) .sm-fcrumb, .sm-fbar:not(.is-profile) .sm-fpin,
.sm-fbar:not(.is-profile) .sm-fremove { display: none; }
.sm-ffield {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  cursor: text;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), box-shadow var(--t-hover) var(--e-hover);
}
.sm-ffield:hover, .sm-ffield.is-focus { translate: 0 calc(var(--lift) * -1); --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); }
.sm-ffield.is-bad { animation: sm-fbad calc(1.16s * max(var(--anim), 0.3)) ease-out; }
.sm-ffield.is-good { animation: sm-fgood calc(1.03s * max(var(--anim), 0.3)) ease-out; }
@keyframes sm-fbad { 5%, 50% { box-shadow: inset 0 0 0 calc(1.3px * var(--s) / 0.75) rgb(235 96 96 / 0.667); } }
@keyframes sm-fgood { 8%, 42% { box-shadow: inset 0 0 0 calc(1.3px * var(--s) / 0.75) color-mix(in srgb, var(--success) 66.7%, transparent); } }
.sm-ffield-icons { position: absolute; left: calc(var(--search-icon-x) - var(--search-ic) / 2); top: 50%; width: var(--search-ic); height: var(--search-ic); margin-top: calc(var(--search-ic) / -2); }
.sm-ffield-icons .sm-icon { position: absolute; inset: 0; --ic: var(--search-ic); color: color-mix(in srgb, var(--textOff), var(--title) 20%); transition: opacity var(--t-hover), scale var(--t-hover), color var(--t-hover); }
.sm-ffield:hover .sm-ffield-icons .sm-icon, .sm-ffield.is-focus .sm-ffield-icons .sm-icon { color: var(--title); }
.sm-ffield-icons .is-ok { opacity: 0; scale: 0.6; color: var(--success); }
.sm-ffield.is-good .is-ok { animation: sm-fswap calc(1.03s * max(var(--anim), 0.3)) ease-out; }
.sm-ffield.is-good .is-add { animation: sm-fswap-out calc(1.03s * max(var(--anim), 0.3)) ease-out; }
@keyframes sm-fswap { 8%, 42% { opacity: 1; scale: 1.2; color: var(--success); } }
@keyframes sm-fswap-out { 8%, 42% { opacity: 0; scale: 0.6; } }
.sm-ffield .sm-input {
  left: calc(var(--search-text-x) - var(--search-input-pad));
  right: calc(var(--key-w) + var(--shortcut-right));
  top: 0;
  height: 100%;
  --fs: var(--search-fs);
  --input-shift: calc(var(--search-fs) * -0.0513);
  --input-pad: var(--search-input-pad);
}
.sm-ffield-key { opacity: 0; translate: 0 var(--px4); transition: opacity var(--t-hover), translate var(--t-hover); }
.sm-ffield.is-typed.is-focus .sm-ffield-key { opacity: 1; translate: 0 0; }
.sm-fadd {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  color: var(--textOff);
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), color var(--t-hover), box-shadow var(--t-hover) var(--e-hover), background var(--t-hover);
}
.sm-fadd:hover { --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); color: var(--textOn); }
.sm-fadd.is-ready { background: linear-gradient(color-mix(in srgb, var(--accent) 82%, white), var(--accent)); color: #fff; }
.sm-fadd.is-ready:hover { translate: 0 calc(var(--lift) * -1); box-shadow: 0 0 calc(var(--px16) * 2) color-mix(in srgb, var(--accent) 30%, transparent); }
.sm-fadd:active { scale: 0.97; }
.sm-fadd .sm-icon { position: absolute; left: var(--px16); top: 50%; --ic: var(--search-ic); margin-top: calc(var(--ic) / -2); }
.sm-fadd-label { position: absolute; left: calc(var(--px16) * 2 + var(--px10)); top: 50%; --fs: var(--sort-fs); --lh: var(--fs); margin-top: calc(var(--fs) * -0.5513); font-weight: 500; }
.sm-fnotice {
  height: calc(var(--px16) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--px8) - var(--px1));
  padding: 0 var(--px12) 0 calc(var(--px10) + var(--px1));
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  --tone: rgb(235 96 96);
  background: color-mix(in srgb, var(--tone) 13.3%, transparent);
  color: color-mix(in srgb, var(--tone), white 45%);
  --fs: var(--fz13-5);
  --lh: var(--fs);
}
.sm-fnotice[data-kind='0'] { --tone: var(--success); }
.sm-fnotice[data-kind='1'] { --tone: rgb(240 190 90); }
.sm-fnotice i { width: calc(var(--px4) + var(--px3)); height: calc(var(--px4) + var(--px3)); border-radius: 50%; background: var(--tone); }
.sm-stage.is-light .sm-fnotice { color: color-mix(in srgb, var(--tone), black 30%); }
.sm-fsort { --tool-right: var(--content-right); }
.sm-fback {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  color: var(--textOff);
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), color var(--t-hover), box-shadow var(--t-hover) var(--e-hover);
}
.sm-fback:hover { translate: 0 calc(var(--lift) * -1); color: var(--title); --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); }
.sm-fback .sm-icon { position: absolute; left: calc(var(--px10) * 2); top: 50%; --ic: var(--search-ic); margin-top: calc(var(--ic) / -2); transition: translate var(--t-hover) var(--e-hover); }
.sm-fback:hover .sm-icon { translate: calc(var(--px3) * -1) 0; }
.sm-fback-label { position: absolute; left: calc(var(--px16) * 3); top: 50%; --fs: var(--search-fs); --lh: var(--fs); margin-top: calc(var(--fs) * -0.5513); }
.sm-fcrumb { display: flex; align-items: center; gap: var(--px10); pointer-events: none; }
.sm-fcrumb i {
  width: var(--px10);
  height: var(--px10);
  border-radius: 50%;
  background: var(--friend);
  box-shadow: 0 0 var(--px10) color-mix(in srgb, var(--friend) 50%, transparent);
}
.sm-fcrumb-name { --fs: var(--fz20); --lh: var(--fs); font-weight: 500; color: var(--title); }
.sm-fpin, .sm-fremove {
  --glass-top: var(--search-top);
  --glass-bottom: var(--search-bottom);
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e), color var(--t-hover), box-shadow var(--t-hover) var(--e-hover), width calc(var(--expand-t) * var(--anim)) var(--expand-e);
}
.sm-fpin:hover, .sm-fremove:hover { translate: 0 calc(var(--lift) * -1); --glass-top: var(--search-lift-top); --glass-bottom: var(--search-lift-bottom); }
.sm-fpin .sm-star-svg { position: absolute; left: 50%; top: 50%; width: var(--search-ic); height: var(--search-ic); margin: calc(var(--search-ic) / -2); overflow: visible; }
.sm-fpin .sm-star-line { fill: none; stroke: color-mix(in srgb, var(--textOff), var(--title) 30%); stroke-width: 1.6; transition: stroke var(--t-hover), opacity var(--t-hover); }
.sm-fpin:hover .sm-star-line { stroke: var(--title); }
.sm-fpin .sm-star-fill { fill: rgb(245 200 90); scale: 0; transition: scale calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e); }
.sm-fpin.is-pinned .sm-star-fill { scale: 1; }
.sm-fpin.is-pinned .sm-star-line { opacity: 0; }
.sm-fpin.is-pinned { box-shadow: 0 0 calc(var(--px16) * 1.4) rgb(245 200 90 / 0.18); }
.sm-fpin.is-spin .sm-star-svg { animation: sm-fspin calc(0.47s * var(--anim)) ease-out; }
@keyframes sm-fspin { 25% { scale: 1.3; } }
.sm-fremove { color: var(--textOff); }
.sm-fremove:hover { color: rgb(240 130 130); }
.sm-fremove.is-confirm { color: rgb(255 170 170); box-shadow: inset 0 0 0 calc(1.2px * var(--s) / 0.75) rgb(235 96 96 / 0.55); background: rgb(235 96 96 / 0.12); }
.sm-fremove .sm-icon { position: absolute; left: calc(var(--px16) + var(--px2)); top: 50%; --ic: var(--search-ic); margin-top: calc(var(--ic) / -2); }
.sm-fremove .sm-roll-wrap { position: absolute; left: calc(var(--px44)); top: 0; bottom: 0; overflow: hidden; }
.sm-fremove .sm-roll { --fs: var(--sort-fs); --lh: var(--fs); text-align: left; }

/* the list */
.sm-fscroll { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sm-fscroll::-webkit-scrollbar { display: none; }
.sm-friends.sm-fscroll { margin: calc(var(--grid-edge) * -1); padding: var(--grid-edge); box-sizing: content-box; }
.sm-fhead { position: relative; height: calc(var(--px14) * 2 + var(--px4)); display: flex; align-items: center; gap: var(--px8); padding-left: var(--px4); margin-top: calc(var(--px4) * -1); }
.sm-fhead-label { --fs: var(--fz12-5); --lh: var(--fs); font-weight: 500; color: var(--textDim); }
.sm-fhead-count {
  position: relative;
  height: calc(var(--px10) * 2);
  border-radius: 99px;
  background: color-mix(in srgb, var(--title) 3.9%, transparent);
  overflow: hidden;
}
.sm-fhead-count .sm-roll { --fs: var(--fz11-5); --lh: var(--fs); color: var(--textOff); }
.sm-flist { position: relative; }
.sm-fcard {
  position: absolute;
  border-radius: var(--card-r);
  cursor: pointer;
  outline: none;
  --hot: 0;
  transition: translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
}
.sm-fcard.is-hot { translate: 0 calc(var(--lift) * -1); --hot: 1; }
.sm-fplate {
  --glass-top: var(--card-top);
  --glass-bottom: var(--card-bottom);
  inset: 0;
  transition: inset var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover), background var(--t-hover) var(--e-hover);
}
.sm-fcard.is-hot .sm-fplate { inset: calc(var(--grow) * -1); --glass-top: var(--card-top-lift); --glass-bottom: var(--card-bottom-lift); }
.sm-fcard.is-pressed .sm-fplate { inset: calc(var(--sink) - var(--grow)); }
.sm-fcard.is-pressed .sm-press-shade { opacity: 1; }
.sm-fcard .sm-press-shade { height: 100%; }
.sm-fcard.is-glint .sm-glint { animation: sm-glint calc(0.7s * var(--anim)) linear forwards; }
/* RadialGlow() behind the avatar in the friend's colour */
.sm-fglow {
  position: absolute;
  left: calc(var(--px16) * 3 - var(--px2) - var(--px16) * 4.4);
  top: 50%;
  width: calc(var(--px16) * 8.8);
  height: calc(var(--px16) * 8.8);
  margin-top: calc(var(--px16) * -4.4);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--friend) 11.8%, transparent), color-mix(in srgb, var(--friend) 2.9%, transparent) 50%, transparent);
  transition: scale var(--t-hover) var(--e-hover), opacity var(--t-hover);
}
.sm-fcard.is-hot .sm-fglow { scale: 1.25; background: radial-gradient(closest-side, color-mix(in srgb, var(--friend) 20.4%, transparent), color-mix(in srgb, var(--friend) 5%, transparent) 50%, transparent); }
.sm-fcard.is-halo .sm-fplate { animation: sm-fhalo calc(0.7s * max(var(--anim), 0.3)) ease-out; }
@keyframes sm-fhalo { 0% { box-shadow: inset 0 0 0 calc(1.5px * var(--s) / 0.75) color-mix(in srgb, var(--friend) 78%, transparent); } }
.sm-favatar {
  position: absolute;
  left: calc(var(--px16) + var(--px2));
  top: 50%;
  width: calc(var(--px16) * 3 + var(--px12));
  height: calc(var(--px16) * 3 + var(--px12));
  margin-top: calc((var(--px16) * 3 + var(--px12)) / -2);
  border-radius: var(--px12);
  background: color-mix(in srgb, var(--field), var(--friend) 16%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--friend) 23.5%, transparent);
  transition: background var(--t-hover) var(--e-hover), box-shadow var(--t-hover) var(--e-hover);
}
.sm-fcard.is-hot .sm-favatar { background: color-mix(in srgb, var(--field), var(--friend) 24%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--friend) 54.9%, transparent); }
.sm-fhead-img { position: absolute; left: 6.67%; top: 6.67%; width: 86.67%; height: 86.67%; image-rendering: auto; }
.sm-fhead-img.is-drawn { inset: 0; width: 100%; height: 100%; }
.sm-fname {
  position: absolute;
  left: calc(var(--px16) + var(--px2) + var(--px16) * 3 + var(--px12) + var(--px16));
  top: calc(50% - var(--px4));
  --fs: var(--fz17-5);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.8006);
  font-weight: 500;
  color: var(--name);
  transition: color var(--t-hover);
}
.sm-fcard.is-hot .sm-fname { color: var(--title); }
.sm-fname-star { position: absolute; top: calc(50% - var(--px4) - var(--fs-n, var(--px10)) * 0.62 - var(--px6) + var(--px1)); width: calc(var(--px14) - var(--px1)); height: calc(var(--px14) - var(--px1)); }
.sm-fname-star .sm-star-svg { inset: 0; width: 100%; height: 100%; overflow: visible; }
.sm-fname-star .sm-star-fill { scale: 1; fill: rgb(245 200 90); }
.sm-fstatus {
  position: absolute;
  left: calc(var(--px16) + var(--px2) + var(--px16) * 3 + var(--px12) + var(--px16));
  top: calc(50% + var(--px14) + var(--px1));
  display: flex;
  align-items: center;
  gap: var(--px8);
  height: var(--fz13-5);
  margin-top: calc(var(--fz13-5) / -2);
  --fs: var(--fz13-5);
  --lh: var(--fs);
  color: var(--textOff);
}
.sm-fstatus i { width: calc(var(--px6) + var(--px1)); height: calc(var(--px6) + var(--px1)); border-radius: 50%; background: color-mix(in srgb, var(--textDim) 78%, transparent); }
.sm-fbadges { position: absolute; top: calc(50% + var(--px14) + var(--px1)); height: calc(var(--px10) * 2 + var(--px2)); margin-top: calc((var(--px10) * 2 + var(--px2)) / -2); display: flex; gap: var(--px6); }
.sm-fbadge {
  position: relative;
  height: calc(var(--px10) * 2 + var(--px2));
  display: flex;
  align-items: center;
  gap: var(--px3);
  padding: 0 calc(var(--px8) - var(--px1)) 0 var(--px6);
  border-radius: 99px;
  background: color-mix(in srgb, var(--title) 3.5%, transparent);
  --fs: var(--fz12);
  --lh: var(--fs);
  color: var(--textOff);
}
.sm-fbadge .sm-icon { --ic: calc(var(--px12) + var(--px1)); color: color-mix(in srgb, var(--icon), var(--friend) 50%); scale: 1; }
/* the pin star and the bin on a hovered card */
.sm-fcbtn {
  position: absolute;
  top: 50%;
  width: calc(var(--px16) * 2 + var(--px2));
  height: calc(var(--px16) * 2 + var(--px2));
  margin-top: calc((var(--px16) * 2 + var(--px2)) / -2);
  border-radius: calc(var(--px8) + var(--px1));
  background: color-mix(in srgb, var(--field) 78%, transparent);
  color: var(--icon);
  opacity: 0;
  transition: opacity var(--t-hover) var(--e-hover), background var(--t-hover), color var(--t-hover), width calc(var(--expand-t) * var(--anim)) var(--expand-e);
  overflow: hidden;
}
.sm-fcbtn.is-remove { right: var(--px16); }
.sm-fcard.is-hot .sm-fcbtn, .sm-fcard.is-confirm .is-remove { opacity: 1; }
.sm-fcard.is-pinned:not(.is-hot) .is-pin { opacity: 0.55; }
.sm-fcbtn:hover { background: var(--fieldHover); }
.sm-fcbtn.is-pin:hover { color: rgb(245 200 90); }
.sm-fcbtn.is-remove:hover { color: rgb(240 120 120); }
.sm-fcard.is-confirm .is-remove { background: color-mix(in srgb, var(--field) 78%, rgb(235 96 96 / 0.35)); color: rgb(255 190 190); }
.sm-fcbtn .sm-icon { position: absolute; left: 50%; top: 50%; --ic: var(--px16); margin: calc(var(--ic) / -2); }
.sm-fcard.is-confirm .is-remove .sm-icon { left: var(--px12); margin-left: 0; }
.sm-fcbtn .sm-star-svg { position: absolute; left: 50%; top: 50%; width: var(--px16); height: var(--px16); margin: calc(var(--px8) * -1); overflow: visible; }
.sm-fcbtn .sm-star-line { fill: none; stroke: currentColor; stroke-width: 1.6; }
.sm-fcbtn .sm-star-fill { fill: rgb(245 200 90); scale: 0; transition: scale calc(var(--check-grow-t) * var(--anim)) var(--check-grow-e); }
.sm-fcard.is-pinned .is-pin .sm-star-fill { scale: 1; }
.sm-fcard.is-pinned .is-pin::after { content: ''; position: absolute; right: var(--px6); top: var(--px6); width: var(--px4); height: var(--px4); border-radius: 50%; background: rgb(245 200 90); }
.sm-fcbtn-label {
  position: absolute;
  left: calc(var(--px12) + var(--px16) + var(--px8));
  top: 50%;
  --fs: var(--fz13-5);
  --lh: var(--fs);
  margin-top: calc(var(--fs) * -0.5513);
  color: rgb(255 200 200);
  opacity: 0;
  transition: opacity var(--t-hover);
}
.sm-fcard.is-confirm .sm-fcbtn-label { opacity: 1; }
.sm-fempty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--px12); pointer-events: none; }
.sm-fempty-ring {
  width: calc(var(--px44) * 2);
  height: calc(var(--px44) * 2);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 calc(1.2px * var(--s) / 0.75) color-mix(in srgb, var(--accent) 24%, transparent), 0 0 calc(var(--px44) * 2) color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--icon), var(--title) 40%);
  animation: sm-fbreathe 3.9s ease-in-out infinite;
}
.sm-fempty-ring .sm-icon { --ic: calc(var(--px10) * 4); }
@keyframes sm-fbreathe { 50% { box-shadow: 0 0 0 calc(var(--px6) + 1px) color-mix(in srgb, var(--accent) 31%, transparent), 0 0 calc(var(--px44) * 2.4) color-mix(in srgb, var(--accent) 22%, transparent); } }
.sm-fempty-title { margin-top: var(--px10); --fs: var(--fz20); --lh: var(--fs); font-weight: 500; color: var(--title); }
.sm-fempty-hint { --fs: var(--fz14); --lh: var(--fs); color: var(--textOff); }

/* the profile */
.sm-fprofile { overflow: visible; }
.sm-fstage .sm-stage-plate.is-friend { height: calc(var(--px44) * 2 - var(--px4)); }
.sm-stage-plate.is-friend .sm-stage-title { left: calc(var(--px10) * 2 + var(--px2)); bottom: calc(var(--px10) * 4); --fs: var(--fz24); }
.sm-fstage-status {
  position: absolute;
  left: calc(var(--px10) * 2 + var(--px2));
  bottom: calc(var(--px10) * 2 + var(--px2));
  height: var(--fz13-5);
  margin-bottom: calc(var(--fz13-5) / -2);
  display: flex;
  align-items: center;
  gap: calc(var(--px6) - var(--px1) + 0.5px);
  --fs: var(--fz13-5);
  --lh: var(--fs);
  color: rgb(196 202 218);
}
.sm-fstage-status i { width: calc(var(--px6) + var(--px1)); height: calc(var(--px6) + var(--px1)); border-radius: 50%; background: rgb(196 202 218 / 0.63); }
.sm-fcol { position: absolute; display: flex; flex-direction: column; gap: var(--px12); align-items: flex-start; }
.sm-fsection { position: relative; flex: none; box-sizing: border-box; }
.sm-fsection-head { display: flex; align-items: center; gap: var(--px10); height: calc(var(--px16) + var(--px2)); }
.sm-fsection-icon { --ic: calc(var(--px16) + var(--px1)); color: color-mix(in srgb, var(--icon), var(--friend) 55%); }
.sm-fsection-title { --fs: var(--fz15-5); --lh: var(--fs); font-weight: 500; color: var(--title); }
.sm-fsection-hint { margin-top: calc(var(--px6) + var(--px1)); --fs: var(--fz12-5); --lh: calc(var(--fs) * 1.1); color: var(--textOff); }
.sm-fswatches { position: relative; display: flex; flex-wrap: wrap; gap: var(--px10); margin-top: var(--px12); }
.sm-fswatch {
  position: relative;
  width: calc(var(--px10) * 3);
  height: calc(var(--px10) * 3);
  border-radius: 50%;
}
.sm-fswatch::before {
  content: '';
  position: absolute;
  inset: var(--px3);
  border-radius: 50%;
  background: var(--sw);
  transition: inset calc(var(--press-t) * var(--anim)) var(--press-e), box-shadow var(--t-hover);
}
.sm-fswatch:hover::before { inset: calc(var(--px3) - var(--px1) - 0.5px); box-shadow: 0 0 var(--px10) color-mix(in srgb, var(--sw) 35%, transparent); }
.sm-fswatch.is-rainbow::before { background: conic-gradient(from 0deg, rgb(245 110 110), rgb(245 220 110), rgb(110 245 110), rgb(110 245 245), rgb(110 110 245), rgb(245 110 245), rgb(245 110 110)); animation: sm-fspin-slow 10.5s linear infinite; }
@keyframes sm-fspin-slow { to { rotate: 360deg; } }
.sm-fswatch.is-custom::before { background: var(--custom, var(--field)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--title) 15.7%, transparent); }
.sm-fswatch.is-custom .sm-icon { position: absolute; left: 50%; top: 50%; --ic: calc(var(--px16) - var(--px1)); margin: calc(var(--ic) / -2); color: var(--textOff); }
.sm-fswatch.is-custom.is-on .sm-icon { color: #fff; }
.sm-fswatch-ring {
  position: absolute;
  left: calc(var(--px2) * -1 + 0.5px);
  top: calc(var(--px2) * -1 + 0.5px);
  width: calc(var(--px10) * 3 + var(--px2) * 2 - 1px);
  height: calc(var(--px10) * 3 + var(--px2) * 2 - 1px);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(2px * var(--s) / 0.75) color-mix(in srgb, var(--title) 86%, transparent);
  pointer-events: none;
  transition: translate calc(var(--slide-t) * var(--anim)) var(--slide-e);
}
.sm-fchips { display: flex; flex-wrap: wrap; gap: var(--px8); margin-top: var(--px12); }
.sm-fchip {
  position: relative;
  height: calc(var(--px16) * 2 + var(--px4));
  padding: 0 var(--px16) 0 calc(var(--px16) * 2 + var(--px10));
  border-radius: 99px;
  background: var(--field);
  color: var(--textOff);
  --fs: var(--fz14);
  --lh: var(--fs);
  transition: background var(--t-hover), color var(--t-hover), box-shadow var(--t-hover), translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
}
.sm-fchip:hover { background: var(--fieldHover); color: var(--title); translate: 0 calc(var(--lift) * -1); }
.sm-fchip.is-on { background: color-mix(in srgb, var(--field), var(--friend) 26%); color: var(--title); box-shadow: inset 0 0 0 calc(1.2px * var(--s) / 0.75) color-mix(in srgb, var(--friend) 63%, transparent); }
.sm-fchip .sm-icon { position: absolute; left: var(--px16); top: 50%; --ic: var(--px16); margin-top: calc(var(--ic) / -2); color: var(--icon); transition: color var(--t-hover); }
.sm-fchip:hover .sm-icon { color: var(--title); }
.sm-fchip.is-on .sm-icon { color: color-mix(in srgb, var(--friend), white 35%); }
.sm-fwear { display: grid; grid-template-columns: repeat(4, var(--tile)); gap: var(--px10); margin-top: var(--px12); }
.sm-fwtile {
  position: relative;
  height: calc(var(--thumb) + var(--px44) + var(--px6));
  border-radius: var(--px12);
  background: var(--field);
  transition: background var(--t-hover), box-shadow var(--t-hover), translate calc(var(--lift-t) * var(--anim)) var(--lift-e);
}
.sm-fwtile:hover { background: var(--fieldHover); translate: 0 calc(var(--lift) * -1); }
.sm-fwtile.is-on { background: color-mix(in srgb, var(--field), var(--friend) 26%); box-shadow: inset 0 0 0 calc(1.1px * var(--s) / 0.75) color-mix(in srgb, var(--friend) 59%, transparent); }
.sm-fwtile-pic { position: absolute; left: var(--px8); top: var(--px6); width: var(--thumb); height: var(--thumb); display: grid; place-items: center; }
.sm-fwtile-thumb { background-repeat: no-repeat; }
.sm-fwtile-icon { --ic: calc(var(--px12) * 2 + var(--px2)); color: color-mix(in srgb, var(--textDim) 59%, transparent); }
.sm-fwtile-label, .sm-fwtile-value { position: absolute; left: var(--px6); right: var(--px6); text-align: center; overflow: hidden; }
.sm-fwtile-label { top: calc(var(--px6) + var(--thumb) + var(--px12)); --fs: var(--fz12-5); --lh: var(--fs); margin-top: calc(var(--fs) * -0.5513); color: var(--textOn); }
.sm-fwtile-value { top: calc(var(--px6) + var(--thumb) + var(--px16) * 2 - var(--px2)); --fs: var(--fz11-5); --lh: var(--fs); margin-top: calc(var(--fs) * -0.5513); color: var(--textOff); }
.sm-fwtile.is-on .sm-fwtile-value { color: color-mix(in srgb, var(--friend), white 35%); }
.sm-stage.is-light .sm-fwtile.is-on .sm-fwtile-value { color: color-mix(in srgb, var(--friend), black 25%); }
.sm-fnote {
  position: relative;
  height: calc(var(--px10) * 4 + var(--px2));
  margin-top: var(--px12);
  border-radius: var(--px10);
  background: var(--field);
  cursor: text;
  transition: background var(--t-hover), box-shadow var(--t-hover);
}
.sm-fnote.is-focus { background: var(--fieldHover); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--friend) 51%, transparent); }
.sm-fnote .sm-input { left: var(--px6); right: var(--px6); top: 0; bottom: 0; --fs: var(--fz14); --input-pad: var(--px8); }
.sm-ffoot { position: relative; flex: none; height: calc(var(--px14) * 2); }
.sm-ffoot-info { position: absolute; left: var(--px6); top: 50%; --fs: var(--fz12-5); --lh: var(--fs); margin-top: calc(var(--fs) * -0.5513); color: var(--textDim); }
.sm-frefresh {
  position: absolute;
  right: 0;
  top: 0;
  height: calc(var(--px14) * 2);
  padding: 0 var(--px8) 0 calc(var(--px16) + var(--px10) + var(--px1));
  border-radius: 99px;
  background: color-mix(in srgb, var(--title) 3.1%, transparent);
  color: var(--textOff);
  --fs: var(--fz12-5);
  --lh: var(--fs);
  transition: background var(--t-hover), color var(--t-hover);
}
.sm-frefresh:hover { background: color-mix(in srgb, var(--title) 6.3%, transparent); color: var(--title); }
.sm-frefresh .sm-icon { position: absolute; left: calc(var(--px8) + var(--px1)); top: 50%; --ic: calc(var(--px12) + var(--px1)); margin-top: calc(var(--ic) / -2); }
.sm-frefresh.is-spin .sm-icon { animation: sm-fturn calc(0.6s * var(--anim)) cubic-bezier(0.33, 1, 0.68, 1); }
@keyframes sm-fturn { to { rotate: 360deg; } }
/* the picker under a cosmetics tile */
.sm-wear-picker { --pop-pad: var(--px6); }
.sm-wear-search { position: relative; height: calc(var(--px16) * 2 + var(--px4)); border-radius: calc(var(--px8) + var(--px1)); background: var(--field); margin-bottom: var(--px6); cursor: text; }
.sm-wear-search > .sm-icon { position: absolute; left: var(--px10); top: 50%; --ic: calc(var(--px16) - var(--px1)); margin-top: calc(var(--ic) / -2); color: var(--textDim); }
.sm-wear-search .sm-input { left: calc(var(--px16) * 2 - var(--px6)); right: var(--px6); top: 0; bottom: 0; --fs: var(--item-fs); --input-pad: var(--px4); }
.sm-ffield-key .sm-text { translate: none; position: relative; top: calc(var(--fs) * -0.0513); }