/**
 * Shared interactive-tool shell (band → white card).
 * Source of truth visual system: bytes converter.
 *
 * Optional HTML: .si-tool > .si-tool__band > .si-tool__card
 * Existing BEM roots are also mapped below so articles keep their markup.
 */

:root {
  --si-tool-surface: #cfd4e3;
  --si-tool-surface-mid: #d5d9e5;
  --si-tool-surface-edge: #c7cede;
  --si-tool-card: #ffffff;
  --si-tool-border: #c5cad8;
  --si-tool-border-soft: #d4d9e6;
  --si-tool-input-bg: #ffffff;
  --si-tool-result-bg: #e1e5ef;
  --si-tool-text: #1c2140;
  --si-tool-text-secondary: #404858;
  --si-tool-muted: #5e6678;
  --si-tool-primary: #1c2140;
  --si-tool-primary-hover: #2e3359;
  --si-tool-accent: #2e3359;
  --si-tool-focus-border: #2e3359;
  --si-tool-focus-ring: rgba(46, 51, 89, 0.15);
  --si-tool-focus-ring-soft: rgba(46, 51, 89, 0.12);
  --si-tool-navy-deep: var(--si-navy-deep, #1c2140);
  --si-tool-btn-gradient:
    linear-gradient(165deg, #232849 0%, var(--si-tool-navy-deep) 55%, #151933 100%);
  --si-tool-btn-gradient-hover:
    linear-gradient(165deg, #2c3355 0%, #252a4a 55%, #1c2140 100%);
  --si-tool-radius: 10px;
  --si-tool-radius-sm: 8px;
  --si-tool-radius-window: 16px;
}

/* Explicit utility classes (optional wrappers) */
.si-tool,
.si-tool__band,
.si-blog-post .si-tool,
.si-blog-post .si-tool__band {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 1.75rem;
  padding: 40px 24px;
  border: 1px solid var(--si-tool-border);
  border-radius: var(--si-tool-radius-window);
  background:
    linear-gradient(
      180deg,
      var(--si-tool-surface) 0%,
      var(--si-tool-surface-mid) 42%,
      var(--si-tool-surface-edge) 100%
    );
  color: var(--si-tool-text);
}

.si-tool__card,
.si-blog-post .si-tool__card {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  background: var(--si-tool-card);
  border: 1px solid var(--si-tool-border);
  border-radius: var(--si-tool-radius-window);
  box-shadow:
    0 1px 3px rgba(28, 33, 64, 0.1),
    0 4px 24px rgba(28, 33, 64, 0.12);
  overflow: hidden;
}

.si-tool__card--narrow,
.si-blog-post .si-tool__card--narrow {
  max-width: 440px;
}

.si-tool__card--mid,
.si-blog-post .si-tool__card--mid {
  max-width: 560px;
}

.si-tool__btn,
.si-blog-post .si-tool__btn {
  appearance: none;
  border: 1px solid rgba(46, 51, 89, 0.35);
  border-radius: var(--si-tool-radius);
  background: var(--si-tool-btn-gradient);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 18, 35, 0.18);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.si-tool__btn:hover,
.si-blog-post .si-tool__btn:hover {
  background: var(--si-tool-btn-gradient-hover);
  filter: brightness(1.06);
  border-color: rgba(46, 51, 89, 0.45);
  box-shadow: 0 4px 12px rgba(15, 18, 35, 0.22);
}

.si-tool__btn:focus-visible,
.si-blog-post .si-tool__btn:focus-visible {
  outline: none;
  border-color: var(--si-tool-focus-border);
  box-shadow: 0 0 0 2px var(--si-tool-focus-ring);
}

.si-tool__btn:active,
.si-blog-post .si-tool__btn:active {
  background: var(--si-tool-btn-gradient);
  filter: brightness(0.96);
  box-shadow: 0 1px 4px rgba(15, 18, 35, 0.22);
}

/* ------------------------------------------------------------------ */
/* Map existing calculator / generator roots → band shell             */
/* ------------------------------------------------------------------ */

.si-bytes-conv,
.si-speed-conv,
.si-css-fmt,
.si-html-fmt,
.si-js-fmt,
.si-bs,
.si-gr,
.si-cc,
.si-ol,
.si-zi,
.si-pr,
.si-rt,
.si-pomodoro,
.si-md,
.si-b64,
.si-qr,
.si-fav,
.si-webp,
.si-wm,
.si-ocr,
.si-flex,
.si-grid,
.si-sprite,
.si-typo,
.si-clip,
.si-contrast,
.si-td,
.si-pal,
.si-tr,
.si-case-conv,
.si-str-arr,
.si-html-strip,
.si-svgv,
.si-tg,
.si-cu,
.si-ar,
.si-shades,
.si-lg,
.si-pwgen,
.si-br,
.si-lf,
.si-btngen,
.si-cron,
.si-tdiff,
.si-blog-post .si-bytes-conv,
.si-blog-post .si-speed-conv,
.si-speed-conv,
.si-blog-post .si-css-fmt,
.si-blog-post .si-html-fmt,
.si-blog-post .si-js-fmt,
.si-blog-post .si-bs,
.si-blog-post .si-gr,
.si-blog-post .si-cc,
.si-blog-post .si-ol,
.si-blog-post .si-zi,
.si-blog-post .si-pr,
.si-blog-post .si-rt,
.si-blog-post .si-pomodoro,
.si-blog-post .si-md,
.si-blog-post .si-b64,
.si-blog-post .si-qr,
.si-blog-post .si-fav,
.si-blog-post .si-webp,
.si-blog-post .si-wm,
.si-blog-post .si-ocr,
.si-blog-post .si-flex,
.si-blog-post .si-grid,
.si-blog-post .si-sprite,
.si-blog-post .si-typo,
.si-blog-post .si-clip,
.si-blog-post .si-contrast,
.si-blog-post .si-td,
.si-blog-post .si-pal,
.si-blog-post .si-tr,
.si-blog-post .si-case-conv,
.si-blog-post .si-str-arr,
.si-blog-post .si-html-strip,
.si-blog-post .si-svgv,
.si-svgv,
.si-blog-post .si-tg,
.si-blog-post .si-cu,
.si-blog-post .si-ar,
.si-blog-post .si-shades,
.si-blog-post .si-lg,
.si-blog-post .si-pwgen,
.si-blog-post .si-br,
.si-blog-post .si-lf,
.si-blog-post .si-btngen,
.si-blog-post .si-cron,
.si-blog-post .si-tdiff {
  --si-tool-surface: #cfd4e3;
  --si-tool-surface-mid: #d5d9e5;
  --si-tool-surface-edge: #c7cede;
  --si-tool-card: #ffffff;
  --si-tool-border: #c5cad8;
  --si-tool-border-soft: #d4d9e6;
  --si-tool-input-bg: #ffffff;
  --si-tool-result-bg: #e1e5ef;
  --si-tool-text: #1c2140;
  --si-tool-text-secondary: #404858;
  --si-tool-muted: #5e6678;
  --si-tool-primary: #1c2140;
  --si-tool-primary-hover: #2e3359;
  --si-tool-accent: #2e3359;
  --si-tool-focus-border: #2e3359;
  --si-tool-focus-ring: rgba(46, 51, 89, 0.15);
  --si-tool-focus-ring-soft: rgba(46, 51, 89, 0.12);
  --si-tool-navy-deep: var(--si-navy-deep, #1c2140);
  --si-tool-btn-gradient:
    linear-gradient(165deg, #232849 0%, var(--si-tool-navy-deep) 55%, #151933 100%);
  --si-tool-btn-gradient-hover:
    linear-gradient(165deg, #2c3355 0%, #252a4a 55%, #1c2140 100%);
  --si-tool-radius: 10px;
  --si-tool-radius-sm: 8px;
  --si-tool-radius-window: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 1.75rem;
  padding: 40px 24px;
  border: 1px solid var(--si-tool-border);
  border-radius: var(--si-tool-radius-window);
  background:
    linear-gradient(
      180deg,
      var(--si-tool-surface) 0%,
      var(--si-tool-surface-mid) 42%,
      var(--si-tool-surface-edge) 100%
    );
  color: var(--si-tool-text);
}

/* White cards / panels inside band */
.si-bytes-conv__card,
.si-speed-conv__card,
.si-css-fmt__panel,
.si-html-fmt__panel,
.si-js-fmt__panel,
.si-bs__panel,
.si-gr__panel,
.si-cc__panel,
.si-ol__panel,
.si-zi__panel,
.si-pr__panel,
.si-rt__panel,
.si-pomodoro__card,
.si-md__card,
.si-b64__card,
.si-qr__card,
.si-fav__card,
.si-webp__card,
.si-wm__card,
.si-ocr__card,
.si-flex__card,
.si-grid__card,
.si-sprite__card,
.si-typo__card,
.si-clip__card,
.si-contrast__card,
.si-td__panel,
.si-pal__card,
.si-tr__panel,
.si-case-conv__panel,
.si-str-arr__panel,
.si-html-strip__panel,
.si-svgv__panel,
.si-tg__panel,
.si-cu__card,
.si-ar__panel,
.si-shades__card,
.si-lg__card,
.si-pwgen__card,
.si-br__panel,
.si-lf__card,
.si-btngen__card,
.si-cron__panel,
.si-tdiff__panel,
.si-tdiff__col,
.si-blog-post .si-bytes-conv__card,
.si-blog-post .si-speed-conv__card,
.si-speed-conv__card,
.si-blog-post .si-css-fmt__panel,
.si-blog-post .si-html-fmt__panel,
.si-blog-post .si-js-fmt__panel,
.si-blog-post .si-bs__panel,
.si-blog-post .si-gr__panel,
.si-blog-post .si-cc__panel,
.si-blog-post .si-ol__panel,
.si-blog-post .si-zi__panel,
.si-blog-post .si-pr__panel,
.si-blog-post .si-rt__panel,
.si-blog-post .si-pomodoro__card,
.si-blog-post .si-md__card,
.si-blog-post .si-b64__card,
.si-blog-post .si-qr__card,
.si-blog-post .si-fav__card,
.si-blog-post .si-webp__card,
.si-blog-post .si-wm__card,
.si-blog-post .si-ocr__card,
.si-blog-post .si-flex__card,
.si-blog-post .si-grid__card,
.si-blog-post .si-sprite__card,
.si-blog-post .si-typo__card,
.si-blog-post .si-clip__card,
.si-blog-post .si-contrast__card,
.si-blog-post .si-td__panel,
.si-blog-post .si-pal__card,
.si-blog-post .si-tr__panel,
.si-blog-post .si-case-conv__panel,
.si-blog-post .si-str-arr__panel,
.si-blog-post .si-html-strip__panel,
.si-blog-post .si-svgv__panel,
.si-svgv__panel,
.si-blog-post .si-tg__panel,
.si-blog-post .si-cu__card,
.si-blog-post .si-ar__panel,
.si-blog-post .si-shades__card,
.si-blog-post .si-lg__card,
.si-blog-post .si-pwgen__card,
.si-blog-post .si-br__panel,
.si-blog-post .si-lf__card,
.si-blog-post .si-btngen__card,
.si-blog-post .si-cron__panel,
.si-blog-post .si-tdiff__panel,
.si-blog-post .si-tdiff__col {
  box-sizing: border-box;
  background: var(--si-tool-card);
  border: 1px solid var(--si-tool-border);
  border-radius: var(--si-tool-radius-window);
  box-shadow:
    0 1px 3px rgba(28, 33, 64, 0.1),
    0 4px 24px rgba(28, 33, 64, 0.12);
  overflow: hidden;
}

/* Sticky code columns / wide layouts need visible overflow */
.si-btngen__card,
.si-cron__panel,
.si-bs__panel,
.si-gr__panel,
.si-zi__panel,
.si-br__panel,
.si-blog-post .si-btngen__card,
.si-blog-post .si-cron__panel,
.si-blog-post .si-bs__panel,
.si-blog-post .si-gr__panel,
.si-blog-post .si-zi__panel,
.si-blog-post .si-br__panel {
  overflow: visible;
}

/* Narrow tools: centered card inside band */
.si-bytes-conv__card,
.si-speed-conv__card,
.si-blog-post .si-bytes-conv__card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.si-pwgen__card,
.si-cu__card,
.si-lg__card,
.si-shades__card,
.si-blog-post .si-pwgen__card,
.si-blog-post .si-cu__card,
.si-blog-post .si-lg__card,
.si-blog-post .si-shades__card {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.si-pal__card,
.si-lf__card,
.si-cc__panel,
.si-ar__panel,
.si-td__panel,
.si-blog-post .si-pal__card,
.si-blog-post .si-lf__card,
.si-blog-post .si-cc__panel,
.si-blog-post .si-ar__panel,
.si-blog-post .si-td__panel {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Quiet navy focus for form controls inside tools */
.si-bytes-conv input:focus,
.si-bytes-conv select:focus,
.si-bytes-conv textarea:focus,
.si-speed-conv input:focus,
.si-speed-conv select:focus,
.si-speed-conv textarea:focus,
.si-css-fmt input:focus,
.si-css-fmt select:focus,
.si-css-fmt textarea:focus,
.si-html-fmt input:focus,
.si-html-fmt select:focus,
.si-html-fmt textarea:focus,
.si-js-fmt input:focus,
.si-js-fmt select:focus,
.si-js-fmt textarea:focus,
.si-bs input:focus,
.si-bs select:focus,
.si-bs textarea:focus,
.si-gr input:focus,
.si-gr select:focus,
.si-gr textarea:focus,
.si-cc input:focus,
.si-cc select:focus,
.si-cc textarea:focus,
.si-ol input:focus,
.si-ol select:focus,
.si-ol textarea:focus,
.si-zi input:focus,
.si-zi select:focus,
.si-zi textarea:focus,
.si-pr input:focus,
.si-pr select:focus,
.si-pr textarea:focus,
.si-rt input:focus,
.si-rt select:focus,
.si-rt textarea:focus,
.si-td input:focus,
.si-td select:focus,
.si-td textarea:focus,
.si-pal input:focus,
.si-pal select:focus,
.si-pal textarea:focus,
.si-tr input:focus,
.si-tr select:focus,
.si-tr textarea:focus,
.si-case-conv input:focus,
.si-case-conv select:focus,
.si-case-conv textarea:focus,
.si-str-arr input:focus,
.si-str-arr select:focus,
.si-str-arr textarea:focus,
.si-html-strip input:focus,
.si-html-strip select:focus,
.si-html-strip textarea:focus,
.si-svgv input:focus,
.si-svgv select:focus,
.si-svgv textarea:focus,
.si-tg input:focus,
.si-tg select:focus,
.si-tg textarea:focus,
.si-cu input:focus,
.si-cu select:focus,
.si-cu textarea:focus,
.si-ar input:focus,
.si-ar select:focus,
.si-ar textarea:focus,
.si-shades input:focus,
.si-shades select:focus,
.si-shades textarea:focus,
.si-lg input:focus,
.si-lg select:focus,
.si-lg textarea:focus,
.si-pwgen input:focus,
.si-pwgen select:focus,
.si-pwgen textarea:focus,
.si-br input:focus,
.si-br select:focus,
.si-br textarea:focus,
.si-lf input:focus,
.si-lf select:focus,
.si-lf textarea:focus,
.si-btngen input:focus,
.si-btngen select:focus,
.si-btngen textarea:focus,
.si-cron input:focus,
.si-cron select:focus,
.si-cron textarea:focus,
.si-tdiff input:focus,
.si-tdiff select:focus,
.si-tdiff textarea:focus,
.si-blog-post .si-bytes-conv input:focus,
.si-blog-post .si-bytes-conv select:focus,
.si-blog-post .si-bytes-conv textarea:focus,
.si-blog-post .si-speed-conv input:focus,
.si-blog-post .si-speed-conv select:focus,
.si-blog-post .si-speed-conv textarea:focus,
.si-blog-post .si-css-fmt input:focus,
.si-blog-post .si-css-fmt select:focus,
.si-blog-post .si-css-fmt textarea:focus,
.si-blog-post .si-html-fmt input:focus,
.si-blog-post .si-html-fmt select:focus,
.si-blog-post .si-html-fmt textarea:focus,
.si-blog-post .si-js-fmt input:focus,
.si-blog-post .si-js-fmt select:focus,
.si-blog-post .si-js-fmt textarea:focus,
.si-blog-post .si-bs input:focus,
.si-blog-post .si-bs select:focus,
.si-blog-post .si-bs textarea:focus,
.si-blog-post .si-gr input:focus,
.si-blog-post .si-gr select:focus,
.si-blog-post .si-gr textarea:focus,
.si-blog-post .si-cc input:focus,
.si-blog-post .si-cc select:focus,
.si-blog-post .si-cc textarea:focus,
.si-blog-post .si-ol input:focus,
.si-blog-post .si-ol select:focus,
.si-blog-post .si-ol textarea:focus,
.si-blog-post .si-zi input:focus,
.si-blog-post .si-zi select:focus,
.si-blog-post .si-zi textarea:focus,
.si-blog-post .si-pr input:focus,
.si-blog-post .si-pr select:focus,
.si-blog-post .si-pr textarea:focus,
.si-blog-post .si-rt input:focus,
.si-blog-post .si-rt select:focus,
.si-blog-post .si-rt textarea:focus,
.si-blog-post .si-td input:focus,
.si-blog-post .si-td select:focus,
.si-blog-post .si-td textarea:focus,
.si-blog-post .si-pal input:focus,
.si-blog-post .si-pal select:focus,
.si-blog-post .si-pal textarea:focus,
.si-blog-post .si-tr input:focus,
.si-blog-post .si-tr select:focus,
.si-blog-post .si-tr textarea:focus,
.si-blog-post .si-case-conv input:focus,
.si-blog-post .si-case-conv select:focus,
.si-blog-post .si-case-conv textarea:focus,
.si-blog-post .si-str-arr input:focus,
.si-blog-post .si-str-arr select:focus,
.si-blog-post .si-str-arr textarea:focus,
.si-blog-post .si-html-strip input:focus,
.si-blog-post .si-html-strip select:focus,
.si-blog-post .si-html-strip textarea:focus,
.si-blog-post .si-svgv input:focus,
.si-blog-post .si-svgv select:focus,
.si-blog-post .si-svgv textarea:focus,
.si-blog-post .si-tg input:focus,
.si-blog-post .si-tg select:focus,
.si-blog-post .si-tg textarea:focus,
.si-blog-post .si-cu input:focus,
.si-blog-post .si-cu select:focus,
.si-blog-post .si-cu textarea:focus,
.si-blog-post .si-ar input:focus,
.si-blog-post .si-ar select:focus,
.si-blog-post .si-ar textarea:focus,
.si-blog-post .si-shades input:focus,
.si-blog-post .si-shades select:focus,
.si-blog-post .si-shades textarea:focus,
.si-blog-post .si-lg input:focus,
.si-blog-post .si-lg select:focus,
.si-blog-post .si-lg textarea:focus,
.si-blog-post .si-pwgen input:focus,
.si-blog-post .si-pwgen select:focus,
.si-blog-post .si-pwgen textarea:focus,
.si-blog-post .si-br input:focus,
.si-blog-post .si-br select:focus,
.si-blog-post .si-br textarea:focus,
.si-blog-post .si-lf input:focus,
.si-blog-post .si-lf select:focus,
.si-blog-post .si-lf textarea:focus,
.si-blog-post .si-btngen input:focus,
.si-blog-post .si-btngen select:focus,
.si-blog-post .si-btngen textarea:focus,
.si-blog-post .si-cron input:focus,
.si-blog-post .si-cron select:focus,
.si-blog-post .si-cron textarea:focus,
.si-blog-post .si-tdiff input:focus,
.si-blog-post .si-tdiff select:focus,
.si-blog-post .si-tdiff textarea:focus {
  outline: none;
  border-color: var(--si-tool-focus-border);
  box-shadow: 0 0 0 2px var(--si-tool-focus-ring);
}

/* Formatters: textarea often has border:0 — use inset ring */
.si-css-fmt__textarea:focus,
.si-html-fmt__textarea:focus,
.si-js-fmt__textarea:focus,
.si-blog-post .si-css-fmt__textarea:focus,
.si-blog-post .si-html-fmt__textarea:focus,
.si-blog-post .si-js-fmt__textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--si-tool-focus-ring);
}

/* Titles sitting in the band (outside card) */
.si-bs__title,
.si-gr__title,
.si-cc__title,
.si-ol__title,
.si-zi__title,
.si-pr__title,
.si-rt__title,
.si-td__title,
.si-tr__title,
.si-case-conv__title,
.si-str-arr__title,
.si-html-strip__title,
.si-svgv__title,
.si-tg__title,
.si-ar__title,
.si-br__title,
.si-cron__title,
.si-tdiff__title,
.si-blog-post .si-bs__title,
.si-blog-post .si-gr__title,
.si-blog-post .si-cc__title,
.si-blog-post .si-ol__title,
.si-blog-post .si-zi__title,
.si-blog-post .si-pr__title,
.si-blog-post .si-rt__title,
.si-blog-post .si-td__title,
.si-blog-post .si-tr__title,
.si-blog-post .si-case-conv__title,
.si-blog-post .si-str-arr__title,
.si-blog-post .si-html-strip__title,
.si-blog-post .si-svgv__title,
.si-svgv__title,
.si-blog-post .si-tg__title,
.si-blog-post .si-ar__title,
.si-blog-post .si-br__title,
.si-blog-post .si-cron__title,
.si-blog-post .si-tdiff__title {
  color: var(--si-tool-text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}

.si-ol__lead,
.si-zi__lead,
.si-pr__lead,
.si-rt__lead,
.si-td__lead,
.si-tr__lead,
.si-case-conv__lead,
.si-str-arr__lead,
.si-html-strip__lead,
.si-svgv__lead,
.si-tg__lead,
.si-ar__lead,
.si-br__lead,
.si-cron__lead,
.si-tdiff__lead,
.si-blog-post .si-ol__lead,
.si-blog-post .si-zi__lead,
.si-blog-post .si-pr__lead,
.si-blog-post .si-rt__lead,
.si-blog-post .si-td__lead,
.si-blog-post .si-tr__lead,
.si-blog-post .si-case-conv__lead,
.si-blog-post .si-str-arr__lead,
.si-blog-post .si-html-strip__lead,
.si-blog-post .si-svgv__lead,
.si-svgv__lead,
.si-blog-post .si-tg__lead,
.si-blog-post .si-ar__lead,
.si-blog-post .si-br__lead,
.si-blog-post .si-cron__lead,
.si-blog-post .si-tdiff__lead {
  color: #404858;
  font-size: 14px;
}

@media (max-width: 640px) {
  .si-tool,
  .si-tool__band,
  .si-bytes-conv,
  .si-speed-conv,
.si-speed-conv,
  .si-css-fmt,
  .si-html-fmt,
  .si-js-fmt,
  .si-bs,
  .si-gr,
  .si-cc,
  .si-ol,
  .si-zi,
  .si-pr,
  .si-rt,
  .si-pomodoro,
  .si-md,
  .si-b64,
  .si-qr,
  .si-fav,
.si-webp,
.si-wm,
.si-ocr,
.si-flex,
.si-grid,
.si-sprite,
.si-typo,
.si-clip,
.si-contrast,
  .si-td,
  .si-pal,
  .si-tr,
  .si-case-conv,
  .si-str-arr,
  .si-html-strip,
.si-svgv,
  .si-tg,
  .si-cu,
  .si-ar,
  .si-shades,
  .si-lg,
  .si-pwgen,
  .si-br,
  .si-lf,
  .si-btngen,
  .si-cron,
  .si-tdiff,
  .si-blog-post .si-tool,
  .si-blog-post .si-tool__band,
  .si-blog-post .si-bytes-conv,
  .si-blog-post .si-speed-conv,
.si-blog-post .si-speed-conv,
.si-speed-conv,
  .si-blog-post .si-css-fmt,
  .si-blog-post .si-html-fmt,
  .si-blog-post .si-js-fmt,
  .si-blog-post .si-bs,
  .si-blog-post .si-gr,
  .si-blog-post .si-cc,
  .si-blog-post .si-ol,
  .si-blog-post .si-zi,
  .si-blog-post .si-pr,
  .si-blog-post .si-rt,
  .si-blog-post .si-pomodoro,
  .si-blog-post .si-md,
  .si-blog-post .si-b64,
  .si-blog-post .si-qr,
  .si-blog-post .si-fav,
  .si-blog-post .si-webp,
  .si-blog-post .si-wm,
  .si-blog-post .si-ocr,
  .si-blog-post .si-flex,
  .si-blog-post .si-grid,
  .si-blog-post .si-sprite,
  .si-blog-post .si-typo,
  .si-blog-post .si-clip,
  .si-blog-post .si-contrast,
  .si-blog-post .si-td,
  .si-blog-post .si-pal,
  .si-blog-post .si-tr,
  .si-blog-post .si-case-conv,
  .si-blog-post .si-str-arr,
  .si-blog-post .si-html-strip,
.si-blog-post .si-svgv,
.si-svgv,
  .si-blog-post .si-tg,
  .si-blog-post .si-cu,
  .si-blog-post .si-ar,
  .si-blog-post .si-shades,
  .si-blog-post .si-lg,
  .si-blog-post .si-pwgen,
  .si-blog-post .si-br,
  .si-blog-post .si-lf,
  .si-blog-post .si-btngen,
  .si-blog-post .si-cron,
  .si-blog-post .si-tdiff {
    padding: 32px 12px;
  }

  .si-bytes-conv__card,
  .si-speed-conv__card,
.si-speed-conv__card,
  .si-pwgen__card,
  .si-cu__card,
  .si-lg__card,
  .si-shades__card,
  .si-pal__card,
  .si-lf__card,
  .si-cc__panel,
  .si-ar__panel,
  .si-td__panel,
  .si-blog-post .si-bytes-conv__card,
  .si-blog-post .si-speed-conv__card,
.si-blog-post .si-speed-conv__card,
.si-speed-conv__card,
  .si-blog-post .si-pwgen__card,
  .si-blog-post .si-cu__card,
  .si-blog-post .si-lg__card,
  .si-blog-post .si-shades__card,
  .si-blog-post .si-pal__card,
  .si-blog-post .si-lf__card,
  .si-blog-post .si-cc__panel,
  .si-blog-post .si-ar__panel,
  .si-blog-post .si-td__panel {
    max-width: none;
  }
}