/* ==========================================================================
   Material Illustrations pack page — scoped styles.
   Every rule lives under .mi so it can never leak onto the rest of the site.
   Tokens come from css/tokens.css; this file never redefines them.
   ========================================================================== */

@property --mi-theme-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #1982ff;
}
@property --mi-hero-top {
  syntax: '<color>';
  inherits: true;
  initial-value: #2b62f2;
}

.mi {
  --mi-theme-color: #1982ff;
  --mi-hero-top: #2b62f2;
  --mi-radius-lg: 28px;
  --mi-radius-md: 18px;
  --mi-radius-sm: 12px;
  /* Shadows are retired site-wide in favour of 1px borders (see individual
     rules below); kept here, neutralised, in case anything still refers to
     them so nothing regresses to a hard drop shadow by accident. */
  --mi-shadow: none;
  --mi-shadow-sm: none;
  --mi-border: 1px solid #e7e7ea;
  --mi-border-on-white: 1px solid rgba(0, 0, 0, .12);
  color: var(--color-text-primary);
  background: var(--color-surface);
  overflow-x: hidden;
}

.mi * { box-sizing: border-box; }
.mi img { max-width: none; }
.mi svg { display: block; }

.mi-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .mi-wrap { padding: 0 32px; }
}

/* Wider wrap for the playground only, to match the mockup: the app window
   runs edge-closer than the rest of the page's content column, capped at
   1440px with side margins that never drop below 48px. */
.mi-wrap--wide {
  max-width: none;
  padding-left: max(20px, 7.2222vw);
  padding-right: max(20px, 7.2222vw);
}
.mi-wrap--wide .mi-app {
  max-width: 1440px;
  margin: 0 auto;
}
/* Fullscreen toggle: takes the whole app window out of the page and pins it
   over the full viewport. Specificity matches .mi-wrap--wide .mi-app (both
   two-class-equivalent selectors) so this wins by source order. Page scroll
   is locked/restored from JS (setMaximized in material.js), not here. */
.mi-wrap--wide .mi-app--maximized {
  position: fixed;
  inset: 0;
  z-index: 1000;
  max-width: none;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.mi-app--maximized .mi-app__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mi-app--maximized .mi-playground-body {
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
}

/* -------------------------------------------------------------------------
   Site header, transparent over this page's hero only. Scoped to body.mi-page
   so it never touches the shared header on any other page (styles.css is
   never edited for this).
   ------------------------------------------------------------------------- */
body.mi-page .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent;
}
body.mi-page .site-header .logo__mark {
  filter: brightness(0) invert(1);
}
body.mi-page .site-header .site-nav a {
  color: #fff;
}
body.mi-page .site-header .site-nav__dot img {
  filter: brightness(0) invert(1);
  opacity: .7;
}
/* The shared nav never collapses or wraps (styles.css keeps it a single row
   at every width), which overflows the viewport on narrow phones on every
   page, not just this one. It can't be fixed there without touching
   styles.css, so it's only neutralised here, scoped to this page's own
   body class, to satisfy "no horizontal scroll on mobile" for this page. */
@media (max-width: 480px) {
  body.mi-page .site-header .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 6px;
    column-gap: 12px;
  }
}

.mi-section {
  padding: 72px 0;
}
.mi-section--tight { padding: 48px 0; }

.mi h2.mi-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 12px;
}
.mi-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

.mi a.btn { text-decoration: none; }

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  .mi *, .mi *::before, .mi *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.mi-hero {
  position: relative;
  /* Mobile/tablet: height follows content flow, same as before. Desktop
     (≥1024px, matching the mockup and the playground's own breakpoint) gets
     a fixed band height instead, see below. */
  padding: 128px 0 308px;
  background: linear-gradient(180deg,
    var(--mi-hero-top) 0%,
    color-mix(in srgb, var(--mi-hero-top) 45%, #fff) 62%,
    #fff 100%);
  transition: --mi-hero-top .5s ease;
  overflow: hidden;
}
.mi-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 1024px) {
  .mi-hero {
    /* Fixed band height (matches the mockup) rather than one derived from
       content flow: the content block is absolutely positioned inside it,
       so real font metrics on the live site can never change this height
       or, in turn, the playground's overlap math further down. */
    min-height: 906px;
    padding: 0;
  }
  .mi-hero__inner {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin: 0;
  }
}
.mi-hero__tags {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 20px;
}
.mi-tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  font-family: 'Figtree', var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 0 16px;
  border-radius: 24px;
  white-space: nowrap;
}
.mi-hero__title {
  font-family: 'Bricolage Grotesque', var(--font-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--mi-hero-top) 55%, transparent);
}
@media (min-width: 1024px) {
  .mi-hero__title { white-space: nowrap; }
}
.mi-hero__sub {
  font-family: 'Figtree', var(--font-body);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  max-width: 685px;
  margin: 0 auto 24px;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--mi-hero-top) 45%, transparent);
}
.mi-hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mi-hero-btn {
  font-family: 'Figtree', var(--font-body);
  font-weight: 700;
  font-size: 22px;
  border-radius: 16px;
}
.mi-hero-btn--solid {
  background: #000;
  color: #fff;
  min-width: 250px;
}
.mi-hero-btn--solid:hover { background: #1a1a1a; }
.mi-hero-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  min-width: 242px;
}
.mi-hero-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.mi-hero__floats {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* The trophy and card used to peek over the app window's edge via a raised
   z-index layer; they now stay behind the playground window like every
   other float, so this container shares the same z-index as the back one. */
.mi-hero__floats--front { z-index: 1; }
.mi-float {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .22));
}
.mi-float img { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .mi-float { opacity: 1 !important; }
}
@media (max-width: 767px) {
  .mi-float { display: none; }
  .mi-float[data-corner] { display: block; }
  /* Explicit left/top px only (never right/bottom): the JS transform centres
     each object on its left/top anchor via translate(-50%,-50%), which only
     resolves correctly when the anchor is expressed as left/top. Values are
     sized so each object's own rotated, scaled-down box clears the viewport
     edge and the hero copy above/around it. */
  .mi-float[data-corner="tl"] { left: 60px !important; top: 597px !important; }
  .mi-float[data-corner="tr"] { left: 337px !important; top: 597px !important; }
  .mi-float[data-corner="bl"] { left: 70px !important; top: 717px !important; }
  .mi-float[data-corner="br"] { left: 305px !important; top: 717px !important; }
}

/* ==========================================================================
   2. PLAYGROUND
   ========================================================================== */
.mi-playground {
  position: relative;
  z-index: 3;
  margin-top: -24px; /* mobile/tablet: hero height follows content flow */
  padding-bottom: 0;
}
@media (min-width: 1024px) {
  .mi-playground { margin-top: -450px; } /* desktop: hero is a fixed 906px band, see above */
}
.mi-app {
  background: var(--color-surface);
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(43, 97, 242, .5);
}
.mi-app__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}
.mi-app__title {
  font-family: 'Figtree', var(--font-body);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-text-primary);
  margin: 0;
  margin-right: auto;
}
.mi-app__maximize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #e7e7ea;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.mi-app__maximize:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }
.mi-app__maximize svg { width: 18px; height: 18px; }
.mi-app__body { padding: 18px 18px 28px; }

/* -------------------- Playground: 3-column layout (Figma-like) -------------------- */
.mi-playground-body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "stage" "browser" "controls";
  gap: 18px;
}
@media (min-width: 1024px) {
  .mi-playground-body {
    grid-template-columns: 224px 1fr 272px;
    grid-template-areas: "browser stage controls";
    height: min(760px, calc(100vh - 140px));
    gap: 24px;
  }
}
.mi-browser, .mi-stage-col, .mi-controls { min-width: 0; min-height: 0; }

/* Left: component browser */
.mi-browser {
  grid-area: browser;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mi-browser__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}
.mi-browser__controls .mi-select,
.mi-browser__controls .mi-search-input {
  width: 100%;
  min-width: 0;
  height: 38px;
  border-radius: 30px;
  border: 1px solid rgba(0, 0, 0, .125);
  font-family: 'Figtree', var(--font-body);
  font-size: 16px;
  flex: 0 0 auto; /* override the tray-row's flex:1/basis:0, which collapses height in this column layout */
}
.mi-browser__controls .mi-select::placeholder,
.mi-browser__controls .mi-search-input::placeholder { color: #8f9bb3; }
.mi-browser__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
  padding: 2px 2px 8px;
}
.mi-browser__list .mi-tray__item {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: #f3f4f8;
  border: none;
}
@media (max-width: 1023px) {
  .mi-browser__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    gap: 12px;
    padding: 4px 2px 12px;
  }
  .mi-browser__list .mi-tray__item { flex: 0 0 auto; width: 76px; height: 76px; aspect-ratio: auto; }
}

/* Centre: the stage column, fits available width AND height */
.mi-stage-col {
  grid-area: stage;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Row above the stage: aspect-ratio chips on the left, history buttons
   (undo/redo/clear) on the right. */
.mi-stage-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin-bottom: 14px;
}
.mi-ratio-group { min-width: 0; }
.mi-controls__heading--light {
  font-family: 'Figtree', var(--font-body);
  font-weight: 500;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.mi-ratio {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mi-ratio__chip {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #f3f4f8;
  border: 1px solid #e7e7ea;
  font-family: 'Figtree', var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
}
.mi-ratio__chip[aria-pressed="true"] {
  border-color: #0b65ff;
  color: #0b65ff;
}
.mi-history {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.mi-history__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 52px;
  border: 1px solid #e7e7ea;
  background: var(--color-surface);
  font-family: 'Figtree', var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
}
.mi-history__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mi-history__btn:hover:not(:disabled) { background: var(--color-surface-raised); }
.mi-history__btn:disabled { opacity: .4; cursor: not-allowed; }

.mi-stage-viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .mi-stage-viewport { flex: 0 0 auto; width: 100%; }
  .mi-stage-row { margin-bottom: 12px; }
}

/* Right: theme / background / arrange / export */
.mi-controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
@media (max-width: 1023px) {
  .mi-controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow-y: visible;
    gap: 16px;
  }
  .mi-controls__section { flex: 0 0 auto; }
}
.mi-controls__heading {
  font-family: 'Figtree', var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}
.mi-controls__heading-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}
.mi-controls__heading-row .mi-controls__heading { margin: 0; }
.mi-controls__stack { display: flex; flex-direction: column; gap: 8px; }
.mi-controls__row { display: flex; gap: 8px; }
.mi-controls__row .mi-iconbtn--block { flex: 1 1 0; padding: 0 6px; }
.mi-iconbtn--block { width: 100%; justify-content: center; }

/* Small unobtrusive help icon + tooltip, reused for the Fill/Stroke row and
   the Change background heading. JS (initTooltip) toggles .is-visible on
   hover, focus and Escape/blur dismiss. */
.mi-help {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #d5d5da;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: 'Figtree', var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.mi-help:hover, .mi-help:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
.mi-tooltip {
  position: absolute;
  z-index: 6;
  right: 0;
  top: calc(100% + 6px);
  width: 200px;
  background: #16181f;
  color: #fff;
  font-family: 'Figtree', var(--font-body);
  font-size: 11.5px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.mi-tooltip.is-visible { opacity: 1; transform: translateY(0); }

/* Add shapes: 8 shapes in two rows of four, plus the Fill/Stroke controls
   directly under them. */
.mi-shapes-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.mi-shape-btn {
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e7e7ea;
  background: var(--color-surface);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.mi-shape-btn svg { width: 18px; height: 18px; }
.mi-shape-btn:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }

/* Fill/Stroke label row: "Fill   Stroke   (?)" sitting above the two
   rounded-rectangle swatches. */
.mi-colorhead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
}
.mi-colorhead__label {
  flex: 1 1 0;
  font-family: 'Figtree', var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Rounded-rectangle colour swatch: a <label> wrapping a native
   <input type="color">, same "transparent input over a styled label"
   technique as the background custom swatch below. Used for shape
   fill/stroke and the background custom colour, so all three match. */
.mi-color-rect {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e7e7ea;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.mi-color-rect input[type="color"] {
  opacity: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
}
.mi-shape-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.mi-color-rect-wrap { position: relative; }
/* "No stroke" clear button: a small, unobtrusive badge on the stroke
   rectangle's corner. Hidden while the current stroke is already none
   (nothing to clear); the rectangle itself shows a diagonal "none" pattern
   in that state instead of a colour. */
#mi-shape-stroke-clear {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--color-surface);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.mi-shape-stroke--none #mi-shape-stroke-clear { display: none; }
.mi-shape-stroke--none .mi-color-rect {
  background-image:
    linear-gradient(45deg, #e2e2e6 25%, transparent 25%),
    linear-gradient(-45deg, #e2e2e6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e2e6 75%),
    linear-gradient(-45deg, transparent 75%, #e2e2e6 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* Compact custom theme dropdown (replaces the old vertical mi-theme-list
   stack). Not a native <select>: a button + an absolutely positioned
   role="listbox", both driven by material.js with full keyboard support. */
.mi-theme-dd { position: relative; }
.mi-theme-dd__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #e7e7ea;
  background: var(--color-surface);
  cursor: pointer;
  font-family: 'Figtree', var(--font-body);
}
.mi-theme-dd__btn:hover { background: var(--color-surface-raised); }
.mi-theme-dd__btn[aria-expanded="true"] { border-color: var(--color-accent); }
.mi-theme-dd__swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid #e7e7ea;
  flex: 0 0 auto;
}
.mi-theme-dd__name {
  flex: 1 1 auto;
  text-align: left;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mi-theme-dd__chevron { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-text-muted); transition: transform .15s ease; }
.mi-theme-dd__btn[aria-expanded="true"] .mi-theme-dd__chevron { transform: rotate(180deg); }
.mi-theme-dd__list {
  position: absolute;
  z-index: 8;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid #e7e7ea;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.mi-theme-dd__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Figtree', var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.mi-theme-dd__option:hover, .mi-theme-dd__option:focus { background: var(--color-surface-raised); outline: none; }
.mi-theme-dd__option[aria-selected="true"] { background: var(--color-surface-chip); }
.mi-theme-dd__opt-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #e7e7ea; flex: 0 0 auto; }

.mi-arrange {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}
.mi-arrange__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid #e7e7ea;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: 'Figtree', var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.mi-arrange__btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mi-arrange__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-arrange__btn:hover:not(:disabled) { background: var(--color-surface-raised); }
.mi-arrange__btn:disabled { opacity: .4; cursor: not-allowed; }
/* Driven by SHOW_STEP_ZORDER in material.js: hides the one-step Forward /
   Backward buttons (minibar + panel) while Bring to front / Send to back
   stay visible. The actions and Cmd/Ctrl+]/[ shortcuts keep working either
   way — this only hides the buttons. */
.mi-zorder-hidden { display: none !important; }

.mi-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 0 2px 16px;
}
.mi-toolbar__group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--color-surface-raised);
  border-radius: 999px;
}
.mi-toolbar__sep { width: 1px; height: 26px; background: var(--color-border); margin: 0 2px; }

.mi-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  outline: 1.5px solid #e7e7ea;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: outline-color .15s ease, transform .15s ease;
}
.mi-swatch:hover { transform: translateY(-1px); }
.mi-swatch[aria-pressed="true"] { outline: 2.5px solid var(--color-accent); }
.mi-swatch::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #16181f;
  color: #fff;
  font-size: 11.5px;
  font-family: var(--font-body);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.mi-swatch:hover::after, .mi-swatch:focus-visible::after { opacity: 1; }

.mi-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #e7e7ea;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: 'Figtree', var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.mi-iconbtn:hover { background: var(--color-surface-raised); }
.mi-iconbtn[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }

.mi-bgtoggle { display: flex; gap: 4px; padding: 4px; background: var(--color-surface-raised); border-radius: 999px; }
.mi-bgtoggle [data-bg] {
  display: inline-block;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e7e7ea;
  cursor: pointer; padding: 0; position: relative;
}
.mi-bgtoggle [aria-pressed="true"] { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.mi-bgtoggle [data-bg="theme"] { background: var(--mi-theme-color); }
.mi-bgtoggle [data-bg="white"] { background: #fff; }
.mi-bgtoggle [data-bg="transparent"] {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}
/* Custom background row: the custom-colour rectangle (same .mi-color-rect
   swatch as Fill/Stroke) beside the hex input, both at the same height. */
.mi-bg-custom-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
}
.mi-bg-custom-row .mi-color-rect { width: 60px; flex: 0 0 auto; }
.mi-bg-custom-hex {
  flex: 1 1 auto;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #e7e7ea;
  padding: 0 12px;
  font-family: 'Figtree', var(--font-body);
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  background: var(--color-surface);
}

.mi-stage-wrap {
  width: 100%;
  /* Default 16:9; overridden inline (JS sets aspect-ratio per the selected chip). */
  aspect-ratio: 1200 / 675;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e7e7ea;
  position: relative;
  background: var(--mi-theme-color);
  touch-action: none;
}
.mi-stage-wrap[data-bg="white"] { background: #fff; }
.mi-stage-wrap[data-bg="transparent"] {
  background-image:
    linear-gradient(45deg, #e6e6e6 25%, transparent 25%),
    linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
    linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}
.mi-stage {
  position: absolute;
  top: 0; left: 0;
  /* Logical size is set inline by JS per the selected aspect-ratio chip;
     these are just the 16:9 default so the stage isn't 0x0 before JS runs. */
  width: 1200px;
  height: 675px;
  transform-origin: top left;
}
.mi-el {
  position: absolute;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.mi-el:active { cursor: grabbing; }
.mi-el img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transition: opacity .2s ease;
}
.mi-el.mi-el--fading img { opacity: 0; }
.mi-shape-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.mi-el--selected { outline: 2px dashed rgba(11, 101, 255, .8); outline-offset: 6px; }
.mi-handle {
  position: absolute;
  right: -12px; bottom: -12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid #fff;
  outline: 1px solid #e7e7ea;
  cursor: nwse-resize;
  display: none;
}
.mi-el--selected .mi-handle { display: block; }
.mi-rotate-handle {
  position: absolute;
  right: -12px; top: -12px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #16181f;
  border: 3px solid #fff;
  outline: 1px solid #e7e7ea;
  cursor: grab;
  display: none;
  align-items: center;
  justify-content: center;
}
.mi-rotate-handle svg { width: 11px; height: 11px; pointer-events: none; }
.mi-el--selected .mi-rotate-handle { display: flex; }
.mi-rotate-handle:active { cursor: grabbing; }

.mi-minibar {
  position: absolute;
  display: none;
  gap: 4px;
  background: #16181f;
  border-radius: 12px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .12);
  z-index: 50;
}
.mi-minibar.is-visible { display: flex; }
.mi-minibar button {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mi-minibar button:hover { background: rgba(255, 255, 255, .14); }
.mi-minibar button svg { width: 16px; height: 16px; }

/* Full-width strip inside the app window, below the 3-column body (see
   index.php: it's a sibling of .mi-playground-body, not nested inside the
   stage column) so it runs edge to edge inside .mi-app__body's own padding.
   Single line above ~1100px; wraps to two lines below that instead of
   truncating, so the text is always fully visible. */
.mi-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* No explicit width: this is a block-level flex box (display:flex, not
     inline-flex), so width:auto already stretches it to fill the available
     width of .mi-app__body accounting for the negative left/right margins
     below. A fixed width:100% would instead resolve against the padded
     content box BEFORE those margins are applied, leaving it 20px short of
     the right edge (correct on the left, short on the right). */
  box-sizing: border-box;
  border-radius: 18px;
  background: #eef2fb;
  padding: 10px 20px;
  text-align: center;
  font-family: 'Figtree', var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #566275;
  /* .mi-app__body has 18px side / 28px bottom padding; these negative
     margins pull the strip out to sit exactly 8px from the window's own
     left, right and bottom edges instead of the shared 18/28px inset. */
  margin: 16px -10px -20px;
}
.mi-hint a {
  color: #0b65ff;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.mi-hint a:hover { text-decoration: underline; }
@media (min-width: 1100px) {
  .mi-hint {
    border-radius: 50px;
    white-space: nowrap;
    height: 36px;
    padding: 0 24px;
  }
}

.mi-tray { margin-top: 24px; }
.mi-tray__controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mi-select, .mi-search-input {
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
}
.mi-select { min-width: 170px; }
.mi-search-input { flex: 1; min-width: 160px; }
.mi-select:focus-visible, .mi-search-input:focus-visible,
.mi-iconbtn:focus-visible, .mi-swatch:focus-visible, .mi-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.mi-tray__row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
}
.mi-tray__item {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  cursor: grab;
  transition: transform .12s ease, border-color .12s ease;
}
.mi-tray__item:hover { transform: translateY(-2px); border-color: rgba(0, 0, 0, .2); }
.mi-tray__item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.mi-tray__ghost {
  position: fixed;
  width: 60px; height: 60px;
  pointer-events: none;
  z-index: 999;
  opacity: .85;
  display: none;
}
.mi-tray__ghost img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   3. BUILT FOR FIGMA
   ========================================================================== */
.mi-figma__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 880px) {
  .mi-figma__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
}
.mi-figma__frame {
  border-radius: var(--mi-radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}
.mi-figma__framebar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  background: #ECECEF;
}
.mi-figma__framebar span { width: 10px; height: 10px; border-radius: 50%; background: #D6D6DC; }
.mi-figma__frame video, .mi-figma__frame img { width: 100%; height: auto; display: block; }

.mi-figma__steps {
  list-style: none;
  margin: 24px 0 28px;
  padding: 0;
  counter-reset: mi-step;
}
.mi-figma__steps li {
  counter-increment: mi-step;
  display: flex;
  gap: 16px;
  padding: 12px 0;
  font-size: 16.5px;
  line-height: 1.5;
}
.mi-figma__steps li::before {
  content: counter(mi-step);
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface-chip);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.mi-figma__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mi-figma__tags span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-surface-chip);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ==========================================================================
   4. LIBRARY
   ========================================================================== */
.mi-library__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.mi-library__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .mi-library__main { grid-template-columns: 200px 1fr; align-items: start; }
}
.mi-library__cats {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
}
@media (min-width: 880px) {
  .mi-library__cats {
    display: block;
    position: sticky;
    top: 24px;
    overflow: visible;
  }
  .mi-library__cats li { margin-bottom: 4px; }
}
.mi-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
@media (min-width: 880px) {
  .mi-cat { border-radius: 12px; border-color: transparent; }
}
.mi-cat[aria-pressed="true"] {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.mi-cat__count { font-family: var(--font-mono); font-size: 11.5px; opacity: .75; }

.mi-library__search { margin-bottom: 18px; }
.mi-library__search input { width: 100%; }

.mi-library__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .mi-library__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (min-width: 992px) {
  .mi-library__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}
@media (min-width: 1200px) {
  .mi-library__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}
.mi-library__more { text-align: center; margin-top: 28px; }
.mi-library__more .mi-iconbtn {
  height: 48px;
  padding: 0 28px;
  font-size: 14.5px;
}
.mi-library__more[hidden] { display: none; }

.mi-card {
  aspect-ratio: 1 / 1;
  border-radius: var(--mi-radius-sm);
  background: var(--color-surface-raised);
  border-width: 0;
  padding: 14%;
  position: relative;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
  overflow: hidden;
}
.mi-card:hover, .mi-card:focus-visible { transform: translateY(-4px); }
.mi-card img { width: 100%; height: 100%; object-fit: contain; }
.mi-card__pill {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 8px);
  background: #16181f;
  color: #fff;
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s ease, transform .15s ease;
}
.mi-card:hover .mi-card__pill, .mi-card:focus-visible .mi-card__pill { opacity: 1; transform: translate(-50%, 0); }
.mi-library__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}

.mi-panel__overlay {
  position: fixed; inset: 0;
  background: rgba(10, 12, 20, .5);
  z-index: 200;
  display: none;
}
.mi-panel__overlay.is-open { display: block; }
.mi-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--color-surface);
  z-index: 201;
  border-left: 1px solid #e7e7ea;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.mi-panel.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
@media (max-width: 640px) {
  .mi-panel {
    top: auto; left: 0; right: 0; width: 100%;
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    max-height: 88vh;
  }
  .mi-panel.is-open { transform: translateY(0); }
}
.mi-panel__close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mi-panel__preview {
  aspect-ratio: 1/1;
  background: var(--color-surface-raised);
  border-radius: var(--mi-radius-sm);
  display: flex; align-items: center; justify-content: center;
  padding: 12%;
  margin: 8px 0 20px;
}
.mi-panel__preview img { width: 100%; height: 100%; object-fit: contain; }
.mi-panel__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; margin: 0 0 4px; }
.mi-panel__cat { color: var(--color-text-muted); font-size: 14px; margin: 0 0 18px; }
.mi-panel__swatches { display: flex; gap: 8px; margin-bottom: 22px; }
.mi-panel__actions { display: flex; flex-direction: column; gap: 10px; }
.mi-panel__actions .btn { width: 100%; }
.mi-panel__actions .mi-iconbtn { width: 100%; height: 48px; justify-content: center; font-size: 14.5px; }

/* ==========================================================================
   5. FIVE THEMES
   ========================================================================== */
.mi-themes__lead {
  font-family: 'Figtree', var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0;
}
/* Mobile: list is a horizontal-scroll row stacked above the preview.
   Desktop (>=760px): a row, list left / preview right, gap fixed at 24px so
   the list is never a magic pixel width - it just gets whatever's left after
   the preview claims its own natural size (its aspect ratio at the row's
   height, which the list's own stacked-button content sets - see
   align-items:stretch below). */
.mi-themes__layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 760px) {
  .mi-themes__layout { flex-direction: row; align-items: stretch; gap: 24px; }
}
.mi-themes__list {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding-top: 60px;
  padding-bottom: 20px;
}
@media (min-width: 760px) {
  .mi-themes__list {
    flex: 1 1 0;
    min-width: 200px;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible;
    gap: 0;
  }
}
.mi-theme-select {
  flex: 0 0 auto;
  min-width: 160px;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid #e7e7ea;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
@media (min-width: 760px) { .mi-theme-select { min-width: 0; width: 100%; } }
.mi-theme-select:hover { border-color: rgba(0, 0, 0, .2); }
.mi-theme-select[aria-pressed="true"] {
  background: var(--color-surface-chip);
  border-color: var(--color-accent);
}
.mi-theme-select__name {
  display: block;
  font-family: 'Figtree', var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}
.mi-theme-select[aria-pressed="true"] .mi-theme-select__name { color: var(--color-accent); }
.mi-theme-select__dots { display: flex; gap: 5px; }
.mi-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
/* The preview IS the scene image (or, missing that file, a placeholder of
   the same box) - no wrapping box, no padding, no background colour of its
   own. On mobile it's a plain block image. On desktop it's a flex item with
   no grow/shrink of its own (flex:0 0 auto): align-items:stretch on the row
   stretches its height to match .mi-themes__list's natural (button) height,
   and width:auto lets it derive its own width from that height at its
   natural aspect ratio, same as any sized image - which is also exactly
   what makes the list "take the remaining space" instead of a fixed width. */
.mi-themes__preview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  border-radius: 24px;
  object-fit: contain;
}
@media (min-width: 760px) {
  .mi-themes__preview {
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    max-height: none;
  }
}
.mi-theme-card__placeholder {
  background: linear-gradient(135deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.02) 100%);
  aspect-ratio: 16 / 9;
}

/* ==========================================================================
   6. IN REAL PRODUCTS
   ========================================================================== */
.mi-bento {
  column-count: 1;
  column-gap: 24px;
  margin-top: 32px;
}
@media (min-width: 600px) {
  .mi-bento { column-count: 2; }
}
@media (min-width: 992px) {
  .mi-bento { column-count: 3; }
}
.mi-bento__tile {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 24px;
  border-radius: var(--mi-radius-sm);
  background: var(--color-surface-raised);
  padding: 12px;
}
.mi-bento__tile img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--mi-radius-sm) - 6px);
}
.mi-bento__caption {
  padding: 10px 2px 0;
  color: var(--color-text-primary);
}
.mi-bento__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.mi-bento__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.mi-bento__caption strong { font-size: 13.5px; font-weight: 600; display: block; }
.mi-bento__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-surface-chip);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ==========================================================================
   7. FAQ
   ========================================================================== */
.mi-faq__list { max-width: 760px; margin: 0 auto; }
.mi-faq__item {
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.mi-faq__item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mi-faq__item summary::-webkit-details-marker { display: none; }
.mi-faq__item summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.mi-faq__item[open] summary::after { content: '\2212'; }
.mi-faq__item p {
  margin: 14px 0 0;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 15.5px;
}

/* ==========================================================================
   8. CLOSING CTA
   ========================================================================== */
.mi-cta {
  background: #0B0E17;
  color: #fff;
  text-align: center;
  padding: 88px 0;
}
.mi-cta .mi-heading { color: #fff; }
.mi-cta__lead {
  color: rgba(255,255,255,.75);
  font-size: 17px;
  max-width: 480px;
  margin: 0 auto 32px;
}
.mi-cta .email-form { margin-top: 32px; }
.mi-cta .email-form__row { border-color: rgba(255,255,255,.18); }
.mi-cta .email-form__row input[type="email"] { color: #fff; }
.mi-cta .email-form__row input[type="email"]::placeholder { color: rgba(255,255,255,.4); }
.mi-cta .email-form__disclaimer { color: rgba(255,255,255,.55); }
/* The section already has one solid blue "Get it free on Figma" button;
   the submit button next to it goes dark/outline so only one blue button
   appears in this section. */
.mi-cta__submit {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
}
.mi-cta__submit:hover { background: rgba(255, 255, 255, .08); }