/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
.blog-content {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  font-size: 16px;
  line-height: 1.8;
}
.dark .blog-content {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
@media (min-width: 768px) {
  .blog-content {
    font-size: 17px;
    line-height: 1.9;
  }
}
.blog-content a {
  color: var(--primary);
  &:hover {
    @media (hover: hover) {
      color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }
  }
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: all 0.2s ease;
}
.dark .blog-content a {
  color: var(--primary);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, var(--primary) 70%, transparent);
  }
  &:hover {
    @media (hover: hover) {
      color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--primary) 50%, transparent);
      }
    }
  }
}
.blog-content a:hover {
  text-decoration-thickness: 2px;
}
.blog-content p {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  line-height: inherit;
}
.dark .blog-content p {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
.blog-content strong,
.blog-content b {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  background: linear-gradient(to bottom, transparent 60%, #f3e8ff 60%);
  padding: 0 2px;
}
.dark .blog-content strong,
.dark .blog-content b {
  color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  background: linear-gradient(to bottom, transparent 60%, rgba(243, 232, 255, 0.2) 60%);
}
.blog-content p strong,
.blog-content p b {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.prose strong,
.prose b {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
}
.prose p strong,
.prose p b {
  background: linear-gradient(to bottom, transparent 60%, #f3e8ff 60%);
  padding: 0 2px;
}
.blog-content ul,
.blog-content ol {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
}
.blog-content li {
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  margin: 0.75rem 0;
}
.dark .blog-content li {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
.blog-content ul:not([class]) {
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content ul:not([class])>li {
  position: relative;
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 8);
  list-style: none;
}
.blog-content ul:not([class])>li::before {
  content: "";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 3);
  left: calc(var(--spacing, 0.25rem) * 0);
  height: calc(var(--spacing, 0.25rem) * 2);
  width: calc(var(--spacing, 0.25rem) * 2);
  border-radius: calc(infinity * 1px);
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.dark .blog-content ul:not([class])>li::before {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
.blog-content ul:not([class])>li:hover::before {
  transform: scale(1.5);
  transition: transform 0.2s ease;
}
.blog-content ol:not(.blog-content > ol) {
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  counter-reset: list-counter;
}
.blog-content ol:not(.blog-content > ol)>li {
  position: relative;
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 10);
  counter-increment: list-counter;
  list-style: none;
}
.blog-content ol:not(.blog-content > ol)>li::before {
  content: counter(list-counter);
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 2);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 7);
  width: calc(var(--spacing, 0.25rem) * 7);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}
.dark .blog-content ol:not(.blog-content > ol)>li::before {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}
.blog-content li>ul,
.blog-content li>ol {
  margin-top: calc(var(--spacing, 0.25rem) * 3);
  margin-bottom: calc(var(--spacing, 0.25rem) * 1);
  margin-left: calc(var(--spacing, 0.25rem) * 4);
}
.blog-content li>ul>li::before {
  content: "▸";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 2);
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
  background: none;
  width: auto;
  height: auto;
  box-shadow: none;
}
.blog-content li>ol {
  counter-reset: nested-counter;
}
.blog-content li>ol>li {
  counter-increment: nested-counter;
  padding-left: calc(var(--spacing, 0.25rem) * 8);
}
.blog-content li>ol>li::before {
  content: counter(nested-counter, lower-alpha) ".";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 2);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 6);
  width: calc(var(--spacing, 0.25rem) * 6);
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    background-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
  box-shadow: none;
}
.blog-content li li {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
}
.blog-content ol>li>strong:first-child,
.blog-content ul>li>strong:first-child {
  display: inline-block;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  background: none;
  padding: 0;
}
.blog-content ul.checklist {
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content ul.checklist>li {
  position: relative;
  border-radius: var(--radius);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  padding-left: calc(var(--spacing, 0.25rem) * 8);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  list-style: none;
}
.blog-content ul.checklist>li::before {
  content: "✓";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 2);
  left: calc(var(--spacing, 0.25rem) * 2);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 5);
  width: calc(var(--spacing, 0.25rem) * 5);
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}
.blog-content ul.icon-list {
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content ul.icon-list>li {
  position: relative;
  border-radius: var(--radius);
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-blue-50, oklch(97% 0.014 254.604));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: transparent;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  padding-left: calc(var(--spacing, 0.25rem) * 10);
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(28.2% 0.091 267.935) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  list-style: none;
}
.blog-content ul.icon-list>li::before {
  content: "→";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 3);
  left: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
  background: none;
  width: auto;
  height: auto;
}
.blog-content ul.highlight-list>li,
.blog-content ol.highlight-list>li {
  border-radius: var(--radius);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
  background-color: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  &:is(.dark *) {
    border-color: var(--color-yellow-600, oklch(68.1% 0.162 75.834));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-900, oklch(42.1% 0.095 57.708)) 20%, transparent);
    }
  }
  transition: all 0.2s ease;
}
.blog-content ul.highlight-list>li:hover,
.blog-content ol.highlight-list>li:hover {
  background-color: var(--color-yellow-100, oklch(97.3% 0.071 103.193));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-900, oklch(42.1% 0.095 57.708)) 30%, transparent);
    }
  }
  transform: translateX(4px);
}
.blog-content img {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  width: 100%;
  border-radius: var(--radius);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  max-width: 100%;
  height: auto;
}
.blog-content h2 {
  margin-top: calc(var(--spacing, 0.25rem) * 16);
  margin-bottom: calc(var(--spacing, 0.25rem) * 8);
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-3xl, 1.875rem);
    line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
  }
  position: relative;
  padding: 1rem 1rem 1rem 2.5rem;
  background: #f9fafb;
  border-left: 4px solid #3b82f6;
  color: #1e293b;
}
.dark .blog-content h2 {
  color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  background: #1e293b;
  border-left-color: #60a5fa;
  color: #f1f5f9;
}
.blog-content h2::before {
  content: "";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #3b82f6;
  border-radius: 50%;
}
.blog-content h3 {
  margin-top: calc(var(--spacing, 0.25rem) * 10);
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-2xl, 1.5rem);
    line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  }
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  color: #334155;
}
.dark .blog-content h3 {
  color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  border-bottom-color: #374151;
}
.blog-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.5rem;
  background: #3b82f6;
  border-radius: 2px;
}
.blog-content h4 {
  margin-top: calc(var(--spacing, 0.25rem) * 8);
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  }
  color: #475569;
}
.dark .blog-content h4 {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
.blog-content h5 {
  margin-top: calc(var(--spacing, 0.25rem) * 6);
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  }
  color: #64748b;
}
.dark .blog-content h5 {
  color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
}
.blog-content .table-wrapper {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  border: 1px solid #e5e7eb;
  min-width: 100%;
}
.dark .blog-content table {
  border-color: #374151;
}
.blog-content th,
.blog-content td {
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}
.dark .blog-content th,
.dark .blog-content td {
  border-bottom-color: #374151;
}
.blog-content th {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  background: #1f2937;
}
.dark .blog-content th {
  background: #374151;
}
.blog-content tbody tr:nth-child(even) {
  background: #f9fafb;
}
.dark .blog-content tbody tr:nth-child(even) {
  background: #1f2937;
}
.blog-content tbody tr:nth-child(odd) {
  background: #ffffff;
}
.dark .blog-content tbody tr:nth-child(odd) {
  background: #111827;
}
.blog-content tr:hover {
  background: #e0f2fe !important;
}
.dark .blog-content tr:hover {
  background: #1e3a5f !important;
}
.blog-article-container {
  border-radius: var(--radius-2xl, 1rem);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 48rem) {
    padding: calc(var(--spacing, 0.25rem) * 8);
  }
  margin: 2rem auto;
  max-width: 900px;
}
.dark .blog-article-container {
  background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
}
.blog-header {
  margin-bottom: calc(var(--spacing, 0.25rem) * 12);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  border-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  padding-bottom: calc(var(--spacing, 0.25rem) * 12);
  height: auto !important;
}
.dark .blog-header {
  border-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.blog-content .toc {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-radius: var(--radius);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding: calc(var(--spacing, 0.25rem) * 6);
  border: 2px solid #e5e7eb;
  position: relative;
}
.dark .blog-content .toc {
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.blog-content .toc::before {
  content: "目次";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * -4);
  left: calc(var(--spacing, 0.25rem) * 6);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.dark .blog-content .toc::before {
  background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
}
.blog-content .toc ul {
  margin-top: calc(var(--spacing, 0.25rem) * 2);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content .toc li {
  position: relative;
  padding-left: 1.5rem;
}
.blog-content .toc li::before {
  content: "▸";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  color: var(--primary);
}
.blog-content .toc a {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:hover {
    @media (hover: hover) {
      color: var(--primary);
    }
  }
  background: none;
  padding-bottom: 0;
}
.dark .blog-content .toc a {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  &:hover {
    @media (hover: hover) {
      color: var(--primary);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--primary) 70%, transparent);
      }
    }
  }
}
.blog-content .point-box {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: calc(var(--radius) + 4px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-blue-200, oklch(88.2% 0.059 254.128));
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-top: calc(var(--spacing, 0.25rem) * 10);
  padding-bottom: calc(var(--spacing, 0.25rem) * 6);
  &:is(.dark *) {
    border-color: var(--color-blue-800, oklch(42.4% 0.199 265.638));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 30%, transparent);
    }
  }
  position: relative;
}
.blog-content .point-box::before {
  content: "POINT";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 4);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
  transform: translateY(-50%);
}
.blog-content .learn-box {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  overflow: hidden;
  border-radius: var(--radius-2xl, 1rem);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
  border: 3px solid rgba(102, 126, 234, 0.5);
}
.dark .blog-content .learn-box {
  background: linear-gradient(135deg, #4c5fd5 0%, #5d3d8c 100%);
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.2);
}
.blog-content .learn-box-header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
}
.blog-content .learn-box-header::before {
  content: "📚";
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
}
.blog-content .learn-box ul {
  margin: calc(var(--spacing, 0.25rem) * 0);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  list-style: none !important;
}
.blog-content .learn-box li {
  position: relative;
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  padding-left: 2rem !important;
}
.blog-content .learn-box li:last-child {
  padding-bottom: calc(var(--spacing, 0.25rem) * 0);
}
.blog-content .learn-box li::before {
  content: "✓";
  position: absolute;
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
}
.blog-content .merit-box,
.blog-content .demerit-box {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  overflow: hidden;
  border-radius: var(--radius-2xl, 1rem);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.dark .blog-content .merit-box,
.dark .blog-content .demerit-box {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.blog-content .merit-box {
  background-color: var(--color-white, #fff);
  border: 2px solid #10b981;
}
.dark .blog-content .merit-box {
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  border: 2px solid #10b981;
}
.blog-content .demerit-box {
  background-color: var(--color-white, #fff);
  border: 2px solid #ef4444;
}
.dark .blog-content .demerit-box {
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  border: 2px solid #ef4444;
}
.blog-content .merit-box::before {
  content: "メリット";
  display: block;
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.blog-content .demerit-box::before {
  content: "デメリット";
  display: block;
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
}
.blog-content .merit-box ul,
.blog-content .demerit-box ul {
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  margin: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  list-style: none !important;
}
.blog-content .merit-box li,
.blog-content .demerit-box li {
  position: relative;
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  padding-left: 2rem !important;
  list-style: none !important;
  font-size: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .blog-content .merit-box li,
.dark .blog-content .demerit-box li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.blog-content .merit-box li:last-child,
.blog-content .demerit-box li:last-child {
  border-bottom: none;
}
.blog-content .merit-box li::before {
  content: "✓";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 2);
  left: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-emerald-600, oklch(59.6% 0.145 163.225));
}
.blog-content .demerit-box li::before {
  content: "✕";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 2);
  left: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-red-500, oklch(63.7% 0.237 25.331));
}
.dark .blog-content .merit-box li::before {
  color: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
}
.dark .blog-content .demerit-box li::before {
  color: var(--color-red-400, oklch(70.4% 0.191 22.216));
}
.blog-content .comparison-table {
  margin-block: calc(var(--spacing, 0.25rem) * 12);
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
}
.blog-content .comparison-table table {
  width: 100%;
  margin: 0;
  box-shadow: none;
}
.blog-content .comparison-table th {
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  padding: calc(var(--spacing, 0.25rem) * 4);
  text-align: left;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  &:is(.dark *) {
    background-color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
  }
}
.blog-content .comparison-table th:first-child {
  border-top-left-radius: var(--radius);
}
.blog-content .comparison-table th:last-child {
  border-top-right-radius: var(--radius);
}
.blog-content .comparison-table td {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  padding: calc(var(--spacing, 0.25rem) * 4);
}
.dark .blog-content .comparison-table td {
  border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
}
.blog-content .comparison-table tbody tr:nth-child(even) {
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
}
.dark .blog-content .comparison-table tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-gray-800, oklch(27.8% 0.033 256.848)) 50%, transparent);
  }
}
.blog-content .comparison-table tr:hover {
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
}
.dark .blog-content .comparison-table tr:hover {
  background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 10%, transparent);
  }
}
.blog-content .comparison-table .highlight {
  background-color: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.dark .blog-content .comparison-table .highlight {
  background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-yellow-900, oklch(42.1% 0.095 57.708)) 20%, transparent);
  }
}
.blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-collapse: separate;
  border-spacing: 0;
}
.blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) thead {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) th {
  padding: calc(var(--spacing, 0.25rem) * 4);
  text-align: left;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
}
.blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) td {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  padding: calc(var(--spacing, 0.25rem) * 4);
}
.dark .blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) td {
  border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
}
.blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, oklch(97% 0.014 254.604) 50%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-50, oklch(97% 0.014 254.604)) 50%, transparent);
  }
}
.dark .blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 20%, transparent);
  }
}
.blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) tbody tr:hover {
  background-color: color-mix(in srgb, oklch(93.2% 0.032 255.585) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-100, oklch(93.2% 0.032 255.585)) 70%, transparent);
  }
}
.dark .blog-content table:not(.comparison-table table):not(.spec-table table):not(.ranking-cards table) tbody tr:hover {
  background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 30%, transparent);
  }
}
.blog-content .cta-button {
  display: inline-block;
  border-radius: var(--radius);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  padding-inline: calc(var(--spacing, 0.25rem) * 8);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
    }
  }
  text-decoration: none;
}
.blog-content .cta-button:hover {
  --tw-translate-y: calc(var(--spacing, 0.25rem) * -0.5);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blog-content .cta-button::after {
  content: "→";
  margin-left: calc(var(--spacing, 0.25rem) * 2);
  display: inline-block;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}
.blog-content .cta-button:hover::after {
  transform: translateX(4px);
}
.blog-content .review-box {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-radius: calc(var(--radius) + 4px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-purple-200, oklch(90.2% 0.063 306.703));
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 8);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-purple-800, oklch(43.8% 0.218 303.724));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  position: relative;
}
.blog-content .review-box::before {
  content: "レビュー";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * -3);
  left: calc(var(--spacing, 0.25rem) * 6);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-purple-500, oklch(62.7% 0.265 303.9));
  }
}
.blog-content .qa-section {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding: calc(var(--spacing, 0.25rem) * 8);
}
.dark .blog-content .qa-section {
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.blog-content .qa-item {
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  &:last-child {
    margin-bottom: calc(var(--spacing, 0.25rem) * 0);
  }
}
.blog-content .qa-question {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.dark .blog-content .qa-question {
  color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
}
.blog-content .qa-question::before {
  content: "Q";
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 7);
  width: calc(var(--spacing, 0.25rem) * 7);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
}
.blog-content .qa-answer {
  position: relative;
  padding-left: calc(var(--spacing, 0.25rem) * 10);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
}
.dark .blog-content .qa-answer {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
}
.blog-content .qa-answer::before {
  content: "A";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 7);
  width: calc(var(--spacing, 0.25rem) * 7);
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
}
.blog-content .qa-section strong,
.blog-content .qa-section b {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  background: none;
  padding: 0;
}
.blog-content .summary-section {
  margin-block: calc(var(--spacing, 0.25rem) * 12);
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-blue-200, oklch(88.2% 0.059 254.128));
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding: calc(var(--spacing, 0.25rem) * 8);
  &:is(.dark *) {
    border-color: var(--color-blue-800, oklch(42.4% 0.199 265.638));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 30%, transparent);
    }
  }
  position: relative;
}
.blog-content .summary-section::before {
  content: "まとめ";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * -4);
  left: calc(var(--spacing, 0.25rem) * 8);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
}
.blog-content .summary-section h3 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  border-style: var(--tw-border-style);
  border-width: 0px;
  padding: calc(var(--spacing, 0.25rem) * 0);
}
.blog-content .summary-section h3::before {
  content: none;
}
.blog-content .spec-table {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border: 1px solid #e5e7eb;
}
.dark .blog-content .spec-table {
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  border-color: #374151;
}
.blog-content .spec-table .spec-table-title {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  padding: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
}
.blog-content .spec-table table {
  margin: calc(var(--spacing, 0.25rem) * 0);
  width: 100%;
  box-shadow: none;
}
.blog-content .spec-table th {
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding: calc(var(--spacing, 0.25rem) * 4);
  text-align: left;
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  width: 35%;
  border-bottom: 1px solid #e5e7eb;
}
.dark .blog-content .spec-table th {
  background-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  border-bottom-color: #4b5563;
}
.blog-content .spec-table td {
  padding: calc(var(--spacing, 0.25rem) * 4);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  border-bottom: 1px solid #e5e7eb;
}
.dark .blog-content .spec-table td {
  color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  border-bottom-color: #4b5563;
}
.blog-content .spec-table tr:last-child th,
.blog-content .spec-table tr:last-child td {
  border-bottom: none;
}
.blog-content .notice-box {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: var(--radius);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-amber-200, oklch(92.4% 0.12 95.746));
  background-color: var(--color-amber-50, oklch(98.7% 0.022 95.277));
  padding: calc(var(--spacing, 0.25rem) * 6);
  position: relative;
  padding-left: 3rem;
}
.dark .blog-content .notice-box {
  border-color: var(--color-amber-800, oklch(47.3% 0.137 46.201));
  background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-900, oklch(41.4% 0.112 45.904)) 20%, transparent);
  }
}
.blog-content .notice-box::before {
  content: "！";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 6);
  left: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-amber-600, oklch(66.6% 0.179 58.318));
}
.blog-content .affiliate-link {
  margin-block: calc(var(--spacing, 0.25rem) * 12);
  border-radius: var(--radius-3xl, 1.5rem);
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-via: var(--color-pink-600, oklch(59.2% 0.249 0.584));
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
  --tw-gradient-to: var(--color-orange-500, oklch(70.5% 0.213 47.604));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  padding: calc(var(--spacing, 0.25rem) * 8);
  text-align: center;
  color: var(--color-white, #fff);
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 48rem) {
    padding: calc(var(--spacing, 0.25rem) * 12);
  }
  position: relative;
  overflow: hidden;
}
.blog-content .affiliate-link::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%,
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
  }
}
.blog-content .affiliate-link p {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  color: var(--color-white, #fff);
}
.blog-content .affiliate-link a {
  color: var(--color-white, #fff);
  text-decoration-line: none;
}
.blog-content .buy-button {
  margin-top: calc(var(--spacing, 0.25rem) * 6);
  display: inline-block;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 8);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing, 0.25rem) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &:hover {
    @media (hover: hover) {
      transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  @media (width >= 48rem) {
    padding-inline: calc(var(--spacing, 0.25rem) * 12);
  }
  position: relative;
  overflow: hidden;
}
.blog-content .buy-button::after {
  content: "→";
  margin-left: calc(var(--spacing, 0.25rem) * 2);
  display: inline-block;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
}
.blog-content .buy-button:hover::after {
  transform: translateX(4px);
}
.blog-content .product-info {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 48rem) {
    padding: calc(var(--spacing, 0.25rem) * 8);
  }
  &:is(.dark *) {
    border-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  position: relative;
}
.blog-content .product-info::before {
  content: "SPEC";
  position: absolute;
  top: 0;
  right: 0;
  border-bottom-left-radius: var(--radius);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
}
.blog-content .use-case-box {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-blue-300, oklch(80.9% 0.105 251.813));
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 48rem) {
    padding: calc(var(--spacing, 0.25rem) * 8);
  }
  &:is(.dark *) {
    border-color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 30%, transparent);
    }
  }
  position: relative;
}
.blog-content .use-case-box::before {
  content: "USE CASE";
  position: absolute;
  top: -0.75rem;
  left: 2rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
}
.blog-content .tips {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  border-top-right-radius: calc(var(--radius) + 4px);
  border-bottom-right-radius: calc(var(--radius) + 4px);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
  background-color: var(--color-green-50, oklch(98.2% 0.018 155.826));
  padding: calc(var(--spacing, 0.25rem) * 6);
  padding-left: calc(var(--spacing, 0.25rem) * 8);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-green-600, oklch(62.7% 0.194 149.214));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-950, oklch(26.6% 0.065 152.934)) 30%, transparent);
    }
  }
  position: relative;
}
.blog-content .tips::before {
  content: "💡 TIPS";
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background-color: var(--color-white, #fff);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-green-600, oklch(62.7% 0.194 149.214));
  &:is(.dark *) {
    background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  }
  &:is(.dark *) {
    color: var(--color-green-400, oklch(79.2% 0.209 151.711));
  }
}
.blog-content .conclusion-box {
  margin-block: calc(var(--spacing, 0.25rem) * 12);
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-amber-300, oklch(87.9% 0.169 91.605));
  background-color: var(--color-amber-50, oklch(98.7% 0.022 95.277));
  padding: calc(var(--spacing, 0.25rem) * 8);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  @media (width >= 48rem) {
    padding: calc(var(--spacing, 0.25rem) * 10);
  }
  &:is(.dark *) {
    border-color: var(--color-amber-700, oklch(55.5% 0.163 48.998));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-950, oklch(27.9% 0.077 45.635)) 30%, transparent);
    }
  }
  position: relative;
}
.blog-content .conclusion-box::before {
  content: "CONCLUSION";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: calc(var(--radius) - 2px);
  background-color: var(--color-amber-600, oklch(66.6% 0.179 58.318));
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-amber-500, oklch(76.9% 0.188 70.08));
  }
}
.blog-content pre {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  background-color: #1e293b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  margin: 0;
}
.dark .blog-content pre {
  background-color: #0f172a;
}
.blog-content pre code {
  display: block;
  overflow-x: auto;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-leading: var(--leading-loose, 2);
  line-height: var(--leading-loose, 2);
  padding: 4.5rem 1.5rem 1.5rem 1.5rem;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
  tab-size: 2;
}
.blog-content pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  --tw-tracking: var(--tracking-wider, 0.05em);
  letter-spacing: var(--tracking-wider, 0.05em);
  text-transform: uppercase;
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border-bottom-right-radius: 0.5rem;
  z-index: 10;
}
.blog-content code:not(pre code) {
  border-radius: 0.25rem;
  padding-inline: calc(var(--spacing, 0.25rem) * 1.5);
  padding-block: calc(var(--spacing, 0.25rem) * 0.5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  background-color: rgba(226, 232, 240, 0.5);
  color: #e11d48;
  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
}
.dark .blog-content code:not(pre code) {
  background-color: rgba(51, 65, 85, 0.5);
  color: #f472b6;
}
.blog-content .token.comment,
.blog-content .token.prolog,
.blog-content .token.doctype,
.blog-content .token.cdata {
  color: #64748b;
}
.blog-content .token.punctuation {
  color: #cbd5e1;
}
.blog-content .token.property,
.blog-content .token.tag,
.blog-content .token.boolean,
.blog-content .token.number,
.blog-content .token.constant,
.blog-content .token.symbol,
.blog-content .token.deleted {
  color: #f472b6;
}
.blog-content .token.selector,
.blog-content .token.attr-name,
.blog-content .token.string,
.blog-content .token.char,
.blog-content .token.builtin,
.blog-content .token.inserted {
  color: #a5f3fc;
}
.blog-content .token.operator,
.blog-content .token.entity,
.blog-content .token.url,
.blog-content .language-css .token.string,
.blog-content .style .token.string {
  color: #fbbf24;
}
.blog-content .token.atrule,
.blog-content .token.attr-value,
.blog-content .token.keyword {
  color: #60a5fa;
}
.blog-content .token.function,
.blog-content .token.class-name {
  color: #c084fc;
}
.blog-content .token.regex,
.blog-content .token.important,
.blog-content .token.variable {
  color: #fb923c;
}
.code-block-wrapper {
  position: relative;
  margin-block: calc(var(--spacing, 0.25rem) * 10);
}
.code-copy-button {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 3);
  right: calc(var(--spacing, 0.25rem) * 3);
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
  color: #93c5fd;
  border: 1px solid rgba(147, 197, 253, 0.3);
  backdrop-filter: blur(4px);
  z-index: 10;
  cursor: pointer;
}
.code-copy-button:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.4) 0%, rgba(139, 92, 246, 0.4) 100%);
  color: #ffffff;
  border-color: rgba(147, 197, 253, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.code-copy-button.copied {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%);
  color: #86efac;
  border-color: rgba(134, 239, 172, 0.4);
}
.blog-content .affiliate-link-template {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, 0.25rem) * 5);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.dark .blog-content .affiliate-link-template {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.blog-content .affiliate-link-template .link-text {
  display: inline-block;
  transition: opacity 0.2s ease;
}
.blog-content .affiliate-link-template::after {
  content: attr(data-hover-text);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
}
.blog-content .affiliate-link-template:hover .link-text {
  opacity: 0;
}
.blog-content .affiliate-link-template:hover::after {
  opacity: 1;
}
.blog-content .affiliate-link-template:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}
.dark .blog-content .affiliate-link-template:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-color: #475569;
}
.blog-content .affiliate-link-template .link-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.blog-content .affiliate-link-template:hover .link-icon {
  opacity: 1;
}
.blog-content .affiliate-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 1);
  border-radius: calc(var(--radius) - 2px);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1.5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  text-decoration: none;
}
.blog-content .affiliate-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.blog-content .amazon-link,
.blog-content .amazon-link-template {
  background: #ff9900;
  color: #131921;
  border-color: transparent;
  font-weight: 600;
}
.blog-content .amazon-link:hover,
.blog-content .amazon-link-template:hover {
  background: #e47911;
  color: #131921;
  box-shadow: 0 6px 20px rgba(255, 153, 0, 0.3);
}
.blog-content .rakuten-link,
.blog-content .rakuten-link-template {
  background: #bf0000;
  color: white;
  border-color: transparent;
  font-weight: 600;
}
.blog-content .rakuten-link:hover,
.blog-content .rakuten-link-template:hover {
  background: #a00000;
  color: white;
  box-shadow: 0 6px 20px rgba(191, 0, 0, 0.3);
}
.blog-content .outline-link.amazon-link-template {
  background: transparent;
  border: 2px solid #ff6600;
  color: #ff6600;
}
.blog-content .outline-link.amazon-link-template:hover {
  background: #ff6600;
  color: white;
}
.blog-content .outline-link.rakuten-link-template {
  background: transparent;
  border: 2px solid #bf0000;
  color: #bf0000;
}
.blog-content .outline-link.rakuten-link-template:hover {
  background: #bf0000;
  color: white;
}
.blog-content .gradient-link.amazon-link-template {
  background: linear-gradient(135deg, #ffa500 0%, #ff6347 50%, #ff4500 100%);
  color: white;
  font-weight: 600;
}
.blog-content .gradient-link.rakuten-link-template {
  background: linear-gradient(135deg, #ff1744 0%, #f50057 50%, #d500f9 100%);
  color: white;
  font-weight: 600;
}
.blog-content .affiliate-link .link-icon {
  margin-left: calc(var(--spacing, 0.25rem) * 1);
  width: 14px;
  height: 14px;
}
.blog-content .affiliate-button-link,
.blog-content .affiliate-button-template {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) + 4px);
  padding-inline: calc(var(--spacing, 0.25rem) * 8);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  text-decoration: none;
  position: relative;
  letter-spacing: 0.025em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  border: none;
}
.blog-content .affiliate-button-template .button-text {
  display: inline-block;
  transition: opacity 0.2s ease;
}
.blog-content .affiliate-button-template::after {
  content: attr(data-hover-text);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
}
.blog-content .affiliate-button-template:hover .button-text {
  opacity: 0;
}
.blog-content .affiliate-button-template:hover::after {
  opacity: 1;
}
.blog-content .affiliate-button-link:hover,
.blog-content .affiliate-button-template:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.blog-content .small-button {
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  font-weight: 600;
}
.blog-content .medium-button {
  padding-inline: calc(var(--spacing, 0.25rem) * 8);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  font-weight: 700;
}
.blog-content .large-button {
  padding-inline: calc(var(--spacing, 0.25rem) * 10);
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  font-weight: 700;
}
.blog-content .cta-section {
  margin-block: calc(var(--spacing, 0.25rem) * 12);
  padding: calc(var(--spacing, 0.25rem) * 8);
  text-align: center;
  background: #f8f9fa;
  border-radius: 1rem;
  border: 1px solid #e9ecef;
}
.dark .blog-content .cta-section {
  background: #1a1a1a;
  border-color: #2d2d2d;
}
.blog-content .cta-section .affiliate-button-template {
  margin: 0.5rem;
}
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
.blog-content .affiliate-link-template.loading {
  background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}
.blog-content .amazon-button.default-style {
  background: linear-gradient(to bottom, #f7ca00, #f0b800);
  color: #0f1111;
  border-bottom: 3px solid #c89411;
}
.blog-content .amazon-button.default-style:hover {
  background: linear-gradient(to bottom, #f0b800, #e4a400);
  box-shadow: 0 10px 30px rgba(255, 153, 0, 0.3);
}
.blog-content .rakuten-button.default-style {
  background: #bf0000;
  color: white;
  border-bottom: 3px solid #990000;
}
.blog-content .rakuten-button.default-style:hover {
  background: #a00000;
  box-shadow: 0 10px 30px rgba(191, 0, 0, 0.3);
}
.blog-content .amazon-button.outline-style {
  background: white;
  border: 2px solid #ff9900;
  color: #c7511f;
}
.blog-content .amazon-button.outline-style:hover {
  background: #fff3e0;
  border-color: #e47911;
  box-shadow: 0 6px 20px rgba(255, 153, 0, 0.2);
}
.blog-content .rakuten-button.outline-style {
  background: white;
  border: 2px solid #bf0000;
  color: #bf0000;
}
.blog-content .rakuten-button.outline-style:hover {
  background: #fee;
  border-color: #a00000;
  box-shadow: 0 6px 20px rgba(191, 0, 0, 0.2);
}
.blog-content .amazon-button.gradient-style {
  background: linear-gradient(135deg, #ffd814 0%, #ff9900 100%);
  color: #0f1111;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.blog-content .amazon-button.gradient-style:hover {
  background: linear-gradient(135deg, #f7ca00 0%, #e47911 100%);
  box-shadow: 0 10px 30px rgba(255, 153, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.blog-content .rakuten-button.gradient-style {
  background: linear-gradient(135deg, #ff1a1a 0%, #bf0000 100%);
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.blog-content .rakuten-button.gradient-style:hover {
  background: linear-gradient(135deg, #e60000 0%, #990000 100%);
  box-shadow: 0 10px 30px rgba(191, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@media (max-width: 768px) {
  .blog-content h2 {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
    padding: 1rem 1rem 1rem 2.5rem;
  }
  .blog-content h3 {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  }
  .blog-content .comparison-table {
    overflow-x: auto;
  }
  .blog-content .spec-table th {
    width: 40%;
  }
  .blog-article-container {
    padding: calc(var(--spacing, 0.25rem) * 3);
    @media (width >= 48rem) {
      padding: calc(var(--spacing, 0.25rem) * 5);
    }
  }
  .blog-content .cta-button {
    width: 100%;
  }
}
.blog-content .affiliate-image-card {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border: 1px solid #e5e7eb;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.dark .blog-content .affiliate-image-card {
  border-color: #374151;
}
.blog-content .affiliate-image-card .affiliate-image-link {
  display: block;
  text-decoration-line: none;
}
.blog-content .affiliate-image-card .affiliate-image-wrapper {
  position: relative;
  height: calc(var(--spacing, 0.25rem) * 48);
  width: 100%;
  overflow: hidden;
  border-top-left-radius: calc(var(--radius) + 4px);
  border-top-right-radius: calc(var(--radius) + 4px);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  &:is(.dark *) {
    background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  }
}
.blog-content .affiliate-image-card .affiliate-image-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: calc(var(--spacing, 0.25rem) * 4);
  transition: transform 0.3s ease;
}
.blog-content .affiliate-image-card:hover .affiliate-image-wrapper img {
  transform: scale(1.05);
}
.blog-content .affiliate-image-card .affiliate-image-content {
  padding: calc(var(--spacing, 0.25rem) * 4);
  text-align: center;
}
.blog-content .affiliate-image-card .affiliate-product-name {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  &:is(.dark *) {
    color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  }
}
.blog-content .affiliate-image-card .affiliate-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.blog-content .affiliate-image-card.amazon-card .affiliate-image-button {
  background-color: #ff9900;
  color: #0f1111;
}
.blog-content .affiliate-image-card.amazon-card:hover .affiliate-image-button {
  background-color: #ff6600;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 153, 0, 0.3);
}
.blog-content .affiliate-image-card.rakuten-card .affiliate-image-button {
  background-color: #bf0000;
  color: white;
}
.blog-content .affiliate-image-card.rakuten-card:hover .affiliate-image-button {
  background-color: #a00000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(191, 0, 0, 0.3);
}
.blog-content .affiliate-image-horizontal {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border: 1px solid #e5e7eb;
}
.dark .blog-content .affiliate-image-horizontal {
  border-color: #374151;
}
.blog-content .affiliate-image-horizontal .affiliate-image-link {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 4);
  padding: calc(var(--spacing, 0.25rem) * 4);
  text-decoration-line: none;
}
.blog-content .affiliate-image-horizontal .affiliate-image-wrapper {
  position: relative;
  height: calc(var(--spacing, 0.25rem) * 32);
  width: calc(var(--spacing, 0.25rem) * 32);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  &:is(.dark *) {
    background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  }
}
.blog-content .affiliate-image-horizontal .affiliate-image-wrapper img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: calc(var(--spacing, 0.25rem) * 2);
}
.blog-content .affiliate-image-horizontal .affiliate-image-content {
  min-width: calc(var(--spacing, 0.25rem) * 0);
  flex: 1;
}
.blog-content .affiliate-image-horizontal .affiliate-product-name {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  &:is(.dark *) {
    color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  }
}
.blog-content .affiliate-image-horizontal .affiliate-image-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 5);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.blog-content .affiliate-image-horizontal.amazon-horizontal .affiliate-image-button {
  background-color: #ff9900;
  color: #0f1111;
}
.blog-content .affiliate-image-horizontal.amazon-horizontal:hover .affiliate-image-button {
  background-color: #ff6600;
  box-shadow: 0 2px 8px rgba(255, 153, 0, 0.3);
}
.blog-content .affiliate-image-horizontal.rakuten-horizontal .affiliate-image-button {
  background-color: #bf0000;
  color: white;
}
.blog-content .affiliate-image-horizontal.rakuten-horizontal:hover .affiliate-image-button {
  background-color: #a00000;
  box-shadow: 0 2px 8px rgba(191, 0, 0, 0.3);
}
.blog-content .affiliate-image-inline {
  margin-block: calc(var(--spacing, 0.25rem) * 1);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: var(--radius);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border: 1px solid #e5e7eb;
}
.dark .blog-content .affiliate-image-inline {
  border-color: #374151;
}
.blog-content .affiliate-image-inline:hover {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transform: translateY(-1px);
}
.blog-content .affiliate-image-inline img {
  height: calc(var(--spacing, 0.25rem) * 8);
  width: calc(var(--spacing, 0.25rem) * 8);
  object-fit: contain;
}
.blog-content .affiliate-image-inline .affiliate-image-text {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .affiliate-image-inline.amazon-inline {
  border-color: #ff9900;
}
.blog-content .affiliate-image-inline.amazon-inline:hover {
  background-color: #fff9f0;
  border-color: #ff6600;
}
.dark .blog-content .affiliate-image-inline.amazon-inline:hover {
  background-color: rgba(255, 153, 0, 0.1);
}
.blog-content .affiliate-image-inline.rakuten-inline {
  border-color: #bf0000;
}
.blog-content .affiliate-image-inline.rakuten-inline:hover {
  background-color: #fff5f5;
  border-color: #a00000;
}
.dark .blog-content .affiliate-image-inline.rakuten-inline:hover {
  background-color: rgba(191, 0, 0, 0.1);
}
@media (max-width: 640px) {
  .blog-content .affiliate-image-horizontal .affiliate-image-link {
    flex-direction: column;
    text-align: center;
  }
  .blog-content .affiliate-image-horizontal .affiliate-image-wrapper {
    height: calc(var(--spacing, 0.25rem) * 40);
    width: 100%;
  }
}
.blog-content .affiliate-image-error {
  color: var(--color-red-600, oklch(57.7% 0.245 27.325));
  text-decoration-line: underline;
  &:is(.dark *) {
    color: var(--color-red-400, oklch(70.4% 0.191 22.216));
  }
}
.moshimo-affiliate-container {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  padding: calc(var(--spacing, 0.25rem) * 4);
  min-height: 50px;
}
.moshimo-affiliate-container>* {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.moshimo-affiliate-wrapper {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
}
.moshimo-affiliate-wrapper .kaerebalink-box,
.moshimo-affiliate-wrapper .kattene-box,
.moshimo-affiliate-wrapper .pochireba,
.moshimo-affiliate-wrapper .cstmreba {
  border-radius: var(--radius);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 4);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.moshimo-affiliate-wrapper .kaerebalink-image,
.moshimo-affiliate-wrapper .kattene-image {
  float: left;
  margin-right: calc(var(--spacing, 0.25rem) * 4);
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
}
.moshimo-affiliate-wrapper .kaerebalink-image img,
.moshimo-affiliate-wrapper .kattene-image img {
  border-radius: var(--radius);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  max-width: 150px;
  height: auto;
}
.moshimo-affiliate-wrapper .kaerebalink-info,
.moshimo-affiliate-wrapper .kattene-info {
  overflow: hidden;
}
.moshimo-affiliate-wrapper .kaerebalink-name,
.moshimo-affiliate-wrapper .kattene-name {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
  line-height: 1.4;
}
.moshimo-affiliate-wrapper .kaerebalink-link1,
.moshimo-affiliate-wrapper .kattene-link {
  margin-top: calc(var(--spacing, 0.25rem) * 4);
  display: inline-block;
}
.moshimo-affiliate-wrapper .kaerebalink-link1 a,
.moshimo-affiliate-wrapper .kattene-link a {
  display: inline-block;
  border-radius: var(--radius);
  background-color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-white, #fff);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-orange-600, oklch(64.6% 0.222 41.116));
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  text-decoration: none !important;
}
.moshimo-affiliate-wrapper::after {
  content: "";
  display: table;
  clear: both;
}
.moshimo-affiliate-wrapper .msmaflink-box {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  border-radius: var(--radius);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  display: flex !important;
  align-items: flex-start;
  gap: 1.5rem;
}
.moshimo-affiliate-wrapper .msmaflink-image {
  flex-shrink: 0;
}
.moshimo-affiliate-wrapper .msmaflink-image img {
  border-radius: var(--radius);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  width: 160px;
  height: auto;
  object-fit: contain;
}
.moshimo-affiliate-wrapper .msmaflink-info {
  flex: 1;
}
.moshimo-affiliate-wrapper .msmaflink-name {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
  line-height: 1.4;
}
.moshimo-affiliate-wrapper .msmaflink-shops {
  margin-top: calc(var(--spacing, 0.25rem) * 4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing, 0.25rem) * 2);
}
.moshimo-affiliate-wrapper .msmaflink-link {
  display: inline-block;
}
.moshimo-affiliate-wrapper .msmaflink-link a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, 0.25rem) * 5);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-white, #fff);
  text-decoration-line: none;
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  text-decoration: none !important;
}
.moshimo-affiliate-wrapper .msmaflink-link-1 a {
  background-color: var(--color-orange-500, oklch(70.5% 0.213 47.604));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-orange-600, oklch(64.6% 0.222 41.116));
    }
  }
}
.moshimo-affiliate-wrapper .msmaflink-link-2 a {
  background-color: var(--color-red-500, oklch(63.7% 0.237 25.331));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-red-600, oklch(57.7% 0.245 27.325));
    }
  }
}
.moshimo-affiliate-wrapper .msmaflink-link-3 a {
  background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
    }
  }
}
@media (max-width: 640px) {
  .moshimo-affiliate-wrapper .msmaflink-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .moshimo-affiliate-wrapper .msmaflink-shops {
    justify-content: center;
  }
}
.blog-content .moshimo-fallback-wrapper {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
}
.blog-content .moshimo-fallback-card {
  border-radius: var(--radius);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.blog-content .moshimo-fallback-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 40rem) {
    flex-direction: row;
  }
}
.blog-content .moshimo-fallback-image {
  margin-inline: auto;
  flex-shrink: 0;
  @media (width >= 40rem) {
    margin-inline: calc(var(--spacing, 0.25rem) * 0);
  }
}
.blog-content .moshimo-fallback-image-wrapper {
  position: relative;
  height: calc(var(--spacing, 0.25rem) * 40);
  width: calc(var(--spacing, 0.25rem) * 40);
}
.blog-content .moshimo-fallback-info {
  flex: 1;
  text-align: center;
  @media (width >= 40rem) {
    text-align: left;
  }
}
.blog-content .moshimo-fallback-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
}
.blog-content .moshimo-fallback-brand {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
}
.blog-content .moshimo-fallback-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  @media (width >= 40rem) {
    justify-content: flex-start;
  }
}
.blog-content .moshimo-fallback-button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      color: var(--color-white, #fff);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  text-decoration: none !important;
}
.blog-content .faq-section {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content .faq-item {
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border: 1px solid;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
  transition: all 0.2s ease;
}
.blog-content .faq-item:hover {
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transform: translateY(-2px);
}
.blog-content .faq-question {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 3);
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding: calc(var(--spacing, 0.25rem) * 5);
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 30%, transparent);
    }
  }
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
}
.blog-content .faq-q-mark {
  display: inline-flex;
  height: calc(var(--spacing, 0.25rem) * 10);
  width: calc(var(--spacing, 0.25rem) * 10);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
}
.blog-content .faq-a-mark {
  display: inline-flex;
  height: calc(var(--spacing, 0.25rem) * 10);
  width: calc(var(--spacing, 0.25rem) * 10);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-green-600, oklch(62.7% 0.194 149.214));
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
  }
}
.blog-content .qa-section h4[id*="q"] {
  margin-bottom: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 3);
  border-top-left-radius: calc(var(--radius) + 4px);
  border-top-right-radius: calc(var(--radius) + 4px);
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding: calc(var(--spacing, 0.25rem) * 4);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 30%, transparent);
    }
  }
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
  position: relative;
  padding-left: 3.5rem;
}
.blog-content .qa-section h4[id]::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: #3b82f6;
  border-radius: 50%;
  display: none;
}
.blog-content .qa-section h4[id*="q"]::before {
  display: block;
  content: "Q";
  color: white;
  font-weight: bold;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
}
.blog-content .qa-section h4[id]+p {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  border-bottom-right-radius: calc(var(--radius) + 4px);
  border-bottom-left-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  position: relative;
  padding-left: 3.5rem;
  margin-top: 0;
  border: 1px solid;
  border-top: 0;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
}
.blog-content .qa-section h4[id]+p::before {
  content: "A";
  position: absolute;
  left: 1rem;
  top: 1.25rem;
  width: 32px;
  height: 32px;
  background: #10b981;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.blog-content .faq-answer {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 3);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 5);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .faq-accordion {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content .faq-accordion-item {
  overflow: hidden;
  border-radius: var(--radius);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
}
.blog-content .faq-accordion-question {
  width: 100%;
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding: calc(var(--spacing, 0.25rem) * 4);
  text-align: left;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
    }
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  &:is(.dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
      }
    }
  }
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing, 0.25rem) * 3);
}
.blog-content .faq-accordion-question::after {
  content: "▼";
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
}
.blog-content .faq-accordion-item.open .faq-accordion-question::after {
  transform: rotate(180deg);
}
.blog-content .faq-accordion-answer {
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 4);
  &:is(.dark *) {
    background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  }
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .faq-cards {
  display: grid;
  gap: calc(var(--spacing, 0.25rem) * 6);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.blog-content .faq-card {
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: transparent;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  &:hover {
    @media (hover: hover) {
      border-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
    }
  }
}
.blog-content .faq-card-question {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 2);
}
.blog-content .faq-card-question::before {
  content: "❓";
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
}
.blog-content .faq-card-answer {
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
  padding-left: 2rem;
}
.blog-content .qa-simple {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  padding-left: calc(var(--spacing, 0.25rem) * 4);
}
.blog-content .qa-simple-q {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-white, #fff);
  }
}
.blog-content .qa-simple-a {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.question-box {
  background-color: #f7fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
}
.dark .question-box {
  background-color: #1a202c;
  border-color: #2d3748;
}
.question-box::before {
  content: "問題";
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: #fff;
  padding: 0 0.5rem;
  font-weight: 700;
  color: #2d3748;
  font-size: 0.875rem;
}
.dark .question-box::before {
  background: #0f172a;
  color: #e2e8f0;
}
.answer-correct {
  background: #10b981;
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
  margin: 2rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.choice-correct {
  color: #22543d;
  background-color: #c6f6d5;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}
.choice-incorrect {
  color: #742a2a;
  background-color: #fed7d7;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
}
.dark .choice-correct {
  color: #9ae6b4;
  background-color: #22543d;
}
.dark .choice-incorrect {
  color: #fc8181;
  background-color: #742a2a;
}
.law-reference {
  background-color: #edf2f7;
  border-left: 4px solid #4a5568;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.75;
}
.dark .law-reference {
  background-color: #2d3748;
  border-left-color: #a0aec0;
}
.law-reference-title {
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dark .law-reference-title {
  color: #e2e8f0;
}
.memorize-box {
  background: #fef2f2;
  border: 2px dashed #f87171;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
}
.dark .memorize-box {
  background: #3d2d2d;
  border-color: #f87171;
}
.memorize-box::before {
  content: "📝 暗記事項";
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: #fff;
  padding: 0 0.5rem;
  font-weight: 700;
  color: #e53e3e;
  font-size: 0.875rem;
}
.dark .memorize-box::before {
  background: #0f172a;
}
.related-questions {
  background-color: #f0f9ff;
  border: 1px solid #90cdf4;
  border-radius: 8px;
  padding: 1.5rem;
  margin: 2rem 0;
}
.dark .related-questions {
  background-color: #1e3a8a;
  border-color: #3b82f6;
}
.related-questions h3 {
  color: #1e40af;
  font-weight: 700;
  margin-bottom: 1rem;
}
.dark .related-questions h3 {
  color: #93bbfc;
}
.related-questions ul {
  list-style: none;
  padding: 0;
}
.related-questions li {
  margin-bottom: 0.5rem;
}
.related-questions a {
  color: #2563eb;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.related-questions a:hover {
  text-decoration: underline;
}
.dark .related-questions a {
  color: #93bbfc;
}
.exam-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}
.exam-table th {
  background-color: #4a5568;
  color: white;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
}
.exam-table td {
  border: 1px solid #e2e8f0;
  padding: 0.75rem;
}
.exam-table tr:nth-child(even) {
  background-color: #f7fafc;
}
.dark .exam-table th {
  background-color: #2d3748;
}
.dark .exam-table td {
  border-color: #4a5568;
}
.dark .exam-table tr:nth-child(even) {
  background-color: #1a202c;
}
.cta-button-wrapper {
  display: inline-block;
}
.cta-button-wrapper a {
  text-decoration: none !important;
}
.cta-button-wrapper img {
  display: none !important;
}
.blog-content .cta-primary {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  text-align: center;
  font-size: 16px;
}
.blog-content .cta-primary a[href*="moshimo"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 8);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(to right, #4f46e5, #2563eb) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  border: none !important;
  color: white !important;
}
.blog-content .cta-primary a[href*="moshimo"]:hover {
  background: linear-gradient(to right, #4338ca, #1d4ed8) !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.blog-content .cta-primary img,
.blog-content .cta-secondary img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.blog-content .cta-secondary {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  text-align: center;
}
.blog-content .cta-secondary a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  padding-inline: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
    }
  }
  text-decoration: none !important;
}
.dark .blog-content .cta-secondary a {
  background-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
    }
  }
}
.blog-content .cta-secondary a:hover {
  transform: translateY(-1px);
}
.blog-content .info-box,
.blog-content .caution-box,
.blog-content .tips-box,
.blog-content .step-box,
.blog-content .checklist-box,
.blog-content .comparison-box,
.blog-content .case-study {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: var(--radius);
  padding: calc(var(--spacing, 0.25rem) * 6);
  position: relative;
}
.blog-content .info-box {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-blue-200, oklch(88.2% 0.059 254.128));
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
}
.dark .blog-content .info-box {
  border-color: var(--color-blue-800, oklch(42.4% 0.199 265.638));
  background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 20%, transparent);
  }
}
.blog-content .info-box.tips {
  border-color: var(--color-green-200, oklch(92.5% 0.084 155.995));
  background-color: var(--color-green-50, oklch(98.2% 0.018 155.826));
}
.dark .blog-content .info-box.tips {
  border-color: var(--color-green-800, oklch(44.8% 0.119 151.328));
  background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 20%, transparent);
  }
}
.blog-content .info-box.tips p {
  margin-block: calc(var(--spacing, 0.25rem) * 2);
}
.blog-content .info-box.tips strong {
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  background: none;
  padding: 0;
}
.blog-content .summary-box {
  position: relative;
  margin-block: calc(var(--spacing, 0.25rem) * 12);
  overflow: hidden;
  border-radius: var(--radius-2xl, 1rem);
  padding: calc(var(--spacing, 0.25rem) * 8);
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%);
  border: 2px solid #c4b5fd;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.1);
}
.blog-content .summary-box::before {
  content: "📋";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 4);
  right: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-3xl, 1.875rem);
  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
  opacity: 20%;
}
.dark .blog-content .summary-box {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border-color: #6d28d9;
}
.blog-content .summary-box h3 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  text-align: center;
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-700, oklch(49.6% 0.265 301.924));
  &:is(.dark *) {
    color: var(--color-purple-300, oklch(82.7% 0.119 306.383));
  }
  border: none !important;
  padding: 0 !important;
}
.blog-content .summary-box h3::before {
  content: none !important;
}
.blog-content .summary-box .summary-subtitle {
  margin-bottom: calc(var(--spacing, 0.25rem) * 5);
  text-align: center;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  &:is(.dark *) {
    color: var(--color-purple-300, oklch(82.7% 0.119 306.383));
  }
}
.blog-content .summary-box ul {
  margin-inline: calc(var(--spacing, 0.25rem) * 0);
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }
  list-style: none !important;
  padding: 0 !important;
}
.blog-content .summary-box ul li {
  position: relative;
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  padding-left: calc(var(--spacing, 0.25rem) * 8);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  }
  list-style: none !important;
}
.blog-content .summary-box ul li::marker {
  content: none;
}
.blog-content .summary-box ul li::before {
  content: "✅";
  position: absolute;
  left: calc(var(--spacing, 0.25rem) * 0);
  font-size: 1rem;
}
.blog-content .summary-box p:not(.summary-subtitle) {
  margin-top: calc(var(--spacing, 0.25rem) * 5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  padding-top: 1rem;
}
.blog-content .summary-section {
  margin-inline: calc(var(--spacing, 0.25rem) * 6);
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  border-radius: var(--radius);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:last-child {
    margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  }
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing, 0.25rem) * -0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.blog-content .summary-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
}
.blog-content .summary-title::before {
  content: "";
  height: calc(var(--spacing, 0.25rem) * 8);
  width: calc(var(--spacing, 0.25rem) * 8);
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  &:is(.dark *) {
    background-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M9 16.2l-4.2-4.2-1.4 1.4 5.6 5.6 12-12-1.4-1.4z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}
.blog-content .summary-subtitle {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  margin-left: calc(var(--spacing, 0.25rem) * 11);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  --tw-tracking: var(--tracking-wider, 0.05em);
  letter-spacing: var(--tracking-wider, 0.05em);
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  text-transform: uppercase;
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
}
.blog-content .summary-list {
  margin-left: calc(var(--spacing, 0.25rem) * 11);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content .summary-list li {
  position: relative;
  padding-left: calc(var(--spacing, 0.25rem) * 6);
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .summary-list li::before {
  content: "→";
  position: absolute;
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-500, oklch(62.7% 0.265 303.9));
}
.blog-content .difference-box {
  position: relative;
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  overflow: hidden;
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-blue-200, oklch(88.2% 0.059 254.128));
  background-color: var(--color-white, #fff);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-blue-800, oklch(42.4% 0.199 265.638));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  }
}
.blog-content .difference-box h3 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 8);
  background-color: var(--color-blue-50, oklch(97% 0.014 254.604));
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  text-align: center;
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950, oklch(28.2% 0.091 267.935)) 30%, transparent);
    }
  }
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
}
.blog-content .difference-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 2);
  padding-inline: calc(var(--spacing, 0.25rem) * 8);
  padding-block: calc(var(--spacing, 0.25rem) * 6);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  &:hover {
    @media (hover: hover) {
      background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
    }
  }
  @media (width >= 48rem) {
    flex-direction: row;
  }
  @media (width >= 48rem) {
    align-items: center;
  }
  @media (width >= 48rem) {
    gap: calc(var(--spacing, 0.25rem) * 4);
  }
  &:is(.dark *) {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
      }
    }
  }
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  &:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0px;
  }
  &:is(.dark *) {
    border-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.blog-content .difference-label {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  @media (width >= 48rem) {
    min-width: 280px;
  }
  @media (width >= 48rem) {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  }
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
}
.blog-content .difference-label::before {
  content: "📋";
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
}
.blog-content .difference-value {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-purple-700, oklch(49.6% 0.265 301.924));
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
}
.blog-content .misconception-box {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
  overflow: hidden;
  border-radius: var(--radius-2xl, 1rem);
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-amber-300, oklch(87.9% 0.169 91.605));
  background-color: var(--color-amber-50, oklch(98.7% 0.022 95.277));
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-amber-700, oklch(55.5% 0.163 48.998));
  }
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-950, oklch(27.9% 0.077 45.635)) 30%, transparent);
    }
  }
}
.blog-content .misconception-box h3 {
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  text-align: center;
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-amber-700, oklch(55.5% 0.163 48.998));
  &:is(.dark *) {
    color: var(--color-amber-400, oklch(82.8% 0.189 84.429));
  }
  letter-spacing: 0.05em;
}
.blog-content .misconception-item {
  margin-inline: calc(var(--spacing, 0.25rem) * 6);
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-900, oklch(21% 0.034 264.665)) 50%, transparent);
    }
  }
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:last-child {
    margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  }
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing, 0.25rem) * -0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
}
.blog-content .misconception {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 4);
  &:last-child {
    margin-bottom: calc(var(--spacing, 0.25rem) * 0);
  }
}
.blog-content .misconception-icon {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 8);
  width: calc(var(--spacing, 0.25rem) * 8);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.blog-content .misconception-icon.wrong {
  background-color: var(--color-red-100, oklch(93.6% 0.032 17.717));
  color: var(--color-red-600, oklch(57.7% 0.245 27.325));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900, oklch(39.6% 0.141 25.723)) 30%, transparent);
    }
  }
  &:is(.dark *) {
    color: var(--color-red-400, oklch(70.4% 0.191 22.216));
  }
}
.blog-content .misconception-icon.correct {
  background-color: var(--color-green-100, oklch(96.2% 0.044 156.743));
  color: var(--color-green-600, oklch(62.7% 0.194 149.214));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 30%, transparent);
    }
  }
  &:is(.dark *) {
    color: var(--color-green-400, oklch(79.2% 0.209 151.711));
  }
}
.blog-content .misconception-text {
  flex: 1;
}
.blog-content .misconception-label {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  display: inline-block;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  --tw-tracking: var(--tracking-wider, 0.05em);
  letter-spacing: var(--tracking-wider, 0.05em);
  text-transform: uppercase;
}
.blog-content .misconception-label.wrong {
  background-color: var(--color-red-100, oklch(93.6% 0.032 17.717));
  color: var(--color-red-700, oklch(50.5% 0.213 27.518));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900, oklch(39.6% 0.141 25.723)) 30%, transparent);
    }
  }
  &:is(.dark *) {
    color: var(--color-red-300, oklch(80.8% 0.114 19.571));
  }
}
.blog-content .misconception-label.correct {
  background-color: var(--color-green-100, oklch(96.2% 0.044 156.743));
  color: var(--color-green-700, oklch(52.7% 0.154 150.069));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 30%, transparent);
    }
  }
  &:is(.dark *) {
    color: var(--color-green-300, oklch(87.1% 0.15 154.449));
  }
}
.blog-content .misconception-content {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-leading: var(--leading-relaxed, 1.625);
  line-height: var(--leading-relaxed, 1.625);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .caution-box {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-amber-200, oklch(92.4% 0.12 95.746));
  background-color: var(--color-amber-50, oklch(98.7% 0.022 95.277));
}
.dark .blog-content .caution-box {
  border-color: var(--color-amber-800, oklch(47.3% 0.137 46.201));
  background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-amber-900, oklch(41.4% 0.112 45.904)) 20%, transparent);
  }
}
.blog-content .tips-box {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-green-200, oklch(92.5% 0.084 155.995));
  background-color: var(--color-green-50, oklch(98.2% 0.018 155.826));
}
.dark .blog-content .tips-box {
  border-color: var(--color-green-800, oklch(44.8% 0.119 151.328));
  background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 20%, transparent);
  }
}
.blog-content .step-box {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-purple-200, oklch(90.2% 0.063 306.703));
  background-color: var(--color-purple-50, oklch(97.7% 0.014 308.299));
}
.dark .blog-content .step-box {
  border-color: var(--color-purple-800, oklch(43.8% 0.218 303.724));
  background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-purple-900, oklch(38.1% 0.176 304.987)) 20%, transparent);
  }
}
.blog-content>ol {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  counter-reset: step-counter;
  list-style: none;
}
.blog-content>ol>li {
  position: relative;
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  padding-left: calc(var(--spacing, 0.25rem) * 16);
  counter-increment: step-counter;
  list-style: none !important;
}
.blog-content>ol>li::before {
  content: counter(step-counter);
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 3);
  left: calc(var(--spacing, 0.25rem) * 0);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 12);
  width: calc(var(--spacing, 0.25rem) * 12);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dark .blog-content>ol>li::before {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
}
.blog-content>ol>li>strong:first-child {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  display: block;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-700, oklch(49.6% 0.265 301.924));
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
  background: none;
  padding: 0;
}
.blog-content>ol>li>ul {
  margin-top: calc(var(--spacing, 0.25rem) * 3);
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  list-style: none !important;
}
.blog-content>ol>li>ul>li {
  position: relative;
  padding-left: calc(var(--spacing, 0.25rem) * 6);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
  list-style: none !important;
}
.blog-content>ol>li>ul>li::before {
  content: "▸";
  position: absolute;
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  display: inline;
}
.blog-content>ol>li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 16);
  left: calc(var(--spacing, 0.25rem) * 6);
  width: calc(var(--spacing, 0.25rem) * 0.5);
  background-color: var(--color-purple-300, oklch(82.7% 0.119 306.383));
  &:is(.dark *) {
    background-color: var(--color-purple-700, oklch(49.6% 0.265 301.924));
  }
  height: calc(100% - 3rem);
}
.blog-content .checklist-box {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
}
.dark .blog-content .checklist-box {
  border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
}
.blog-content .comparison-box {
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-indigo-200, oklch(87% 0.065 274.039));
  background-color: var(--color-indigo-50, oklch(96.2% 0.018 272.314));
}
.dark .blog-content .comparison-box {
  border-color: var(--color-indigo-800, oklch(39.8% 0.195 277.366));
  background-color: color-mix(in srgb, oklch(35.9% 0.144 278.697) 20%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-indigo-900, oklch(35.9% 0.144 278.697)) 20%, transparent);
  }
}
.blog-content .case-study {
  border-style: var(--tw-border-style);
  border-width: 2px;
  border-color: var(--color-slate-300, oklch(86.9% 0.022 252.894));
  background-color: var(--color-slate-50, oklch(98.4% 0.003 247.858));
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  }
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.blog-content .info-box ul,
.blog-content .caution-box ul,
.blog-content .tips-box ul,
.blog-content .step-box ul,
.blog-content .checklist-box ul,
.blog-content .comparison-box ul,
.blog-content .case-study ul,
.blog-content .merit-box ul,
.blog-content .demerit-box ul {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  list-style: none !important;
}
.blog-content .info-box li,
.blog-content .caution-box li,
.blog-content .tips-box li,
.blog-content .step-box li,
.blog-content .checklist-box li,
.blog-content .comparison-box li,
.blog-content .case-study li {
  position: relative;
  padding-left: calc(var(--spacing, 0.25rem) * 7);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
  list-style: none !important;
}
.blog-content .info-box li::before {
  content: "▪";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
}
.blog-content .caution-box li::before {
  content: "⚠";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  color: var(--color-amber-600, oklch(66.6% 0.179 58.318));
  &:is(.dark *) {
    color: var(--color-amber-400, oklch(82.8% 0.189 84.429));
  }
}
.blog-content .tips-box li::before,
.blog-content .info-box.tips li::before {
  content: "💡";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
}
.blog-content .step-box li::before {
  content: "◆";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
}
.blog-content .checklist-box li::before {
  content: "☐";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
}
.blog-content .comparison-box li::before {
  content: "⬥";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  color: var(--color-indigo-600, oklch(51.1% 0.262 276.966));
  &:is(.dark *) {
    color: var(--color-indigo-400, oklch(67.3% 0.182 276.935));
  }
}
.blog-content .case-study li::before {
  content: "▸";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  &:is(.dark *) {
    color: var(--color-slate-400, oklch(70.4% 0.04 256.788));
  }
}
.blog-content .info-box strong {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  display: block;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
  &:is(.dark *) {
    color: var(--color-blue-300, oklch(80.9% 0.105 251.813));
  }
  background: none;
  padding: 0;
}
.service-banner-wrapper {
  display: inline-block;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  max-width: 300px;
  transition: transform 0.3s ease;
}
.service-banner-wrapper:hover {
  transform: scale(1.05);
}
.service-banner-wrapper img {
  height: auto;
  width: 100%;
  display: block !important;
  visibility: visible !important;
}
.service-banner-wrapper img[width="1"][height="1"] {
  display: none !important;
}
@keyframes card-shine {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}
.external-link-card {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
}
.external-link-card-link {
  display: block;
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.external-link-card-link:hover {
  text-decoration-line: none;
  transform: translateY(-2px);
}
.external-link-card-content {
  position: relative;
  border-radius: calc(var(--radius) + 4px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border-color: #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.dark .external-link-card-content {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border-color: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.external-link-card-main {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 4);
  padding: calc(var(--spacing, 0.25rem) * 5);
}
.external-link-card-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}
.external-link-card-link:hover .external-link-card-content::before {
  left: 200%;
}
.external-link-card-link:hover .external-link-card-content {
  border-color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    border-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  }
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
}
.dark .external-link-card-link:hover .external-link-card-content {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
}
.external-link-card-icon-wrapper {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 14);
  width: calc(var(--spacing, 0.25rem) * 14);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) + 4px);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.external-link-card-link:hover .external-link-card-icon-wrapper {
  transform: rotate(5deg) scale(1.1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}
.external-link-card-icon {
  height: calc(var(--spacing, 0.25rem) * 7);
  width: calc(var(--spacing, 0.25rem) * 7);
  color: var(--color-white, #fff);
}
.external-link-card-thumbnail {
  height: calc(var(--spacing, 0.25rem) * 28);
  width: calc(var(--spacing, 0.25rem) * 28);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark .external-link-card-thumbnail {
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}
.external-link-card-link:hover .external-link-card-thumbnail {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.external-link-thumbnail-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.external-link-card-link:hover .external-link-thumbnail-image {
  transform: scale(1.1);
}
.external-link-card-text {
  min-width: calc(var(--spacing, 0.25rem) * 0);
  flex: 1;
}
.external-link-card-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  font-size: 1.05rem;
  line-height: 1.5;
}
.external-link-arrow {
  height: calc(var(--spacing, 0.25rem) * 4);
  width: calc(var(--spacing, 0.25rem) * 4);
  flex-shrink: 0;
  color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
  opacity: 0.7;
}
.external-link-card-link:hover .external-link-arrow {
  transform: translate(3px, -3px);
  opacity: 1;
}
.external-link-card-description {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
  line-height: 1.6;
}
.external-link-card-domain {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  &:is(.dark *) {
    color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  }
}
.external-link-domain-icon {
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
}
.external-link-card-badge {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 1.5);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  margin: 0 auto 0 0;
  width: fit-content;
}
.external-link-card-link:hover .external-link-card-badge {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.6);
}
.external-link-badge-icon {
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
}
.external-link-card.reference-style .external-link-card-content {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}
.dark .external-link-card.reference-style .external-link-card-content {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border-color: #3b82f6;
}
.external-link-card.reference-style .external-link-card-link:hover .external-link-card-content {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #60a5fa;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
}
.dark .external-link-card.reference-style .external-link-card-link:hover .external-link-card-content {
  background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
  border-color: #60a5fa;
}
.external-link-card.reference-style .external-link-card-icon-wrapper {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.external-link-card.reference-style .external-link-card-link:hover .external-link-card-icon-wrapper {
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}
.external-link-card.reference-style .external-link-card-badge {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
@media (max-width: 640px) {
  .external-link-card-main {
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .external-link-card-icon-wrapper {
    height: calc(var(--spacing, 0.25rem) * 12);
    width: calc(var(--spacing, 0.25rem) * 12);
  }
  .external-link-card-icon {
    height: calc(var(--spacing, 0.25rem) * 6);
    width: calc(var(--spacing, 0.25rem) * 6);
  }
  .external-link-card-thumbnail {
    height: calc(var(--spacing, 0.25rem) * 20);
    width: calc(var(--spacing, 0.25rem) * 20);
  }
  .external-link-card-title {
    font-size: 0.95rem;
  }
  .external-link-card-badge {
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
}
.blog-content a[target="_blank"]:not(.external-link-card-link):not(.cta-button):not(.affiliate-link) {
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  text-decoration-line: underline;
  text-decoration-color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
  &:is(.dark *) {
    text-decoration-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  }
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.blog-content a[target="_blank"]:not(.external-link-card-link):not(.cta-button):not(.affiliate-link):hover {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  text-decoration-color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
  &:is(.dark *) {
    text-decoration-color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  }
  text-decoration-thickness: 2px;
}
.blog-content a[target="_blank"]:not(.external-link-card-link):not(.cta-button):not(.affiliate-link)::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.25em;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: baseline;
  opacity: 0.6;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}
.conversation-messages::-webkit-scrollbar {
  width: 6px;
}
.conversation-messages::-webkit-scrollbar-track {
  border-radius: 0.25rem;
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.conversation-messages::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  background-color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  &:is(.dark *) {
    background-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  }
}
.conversation-messages::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  &:is(.dark *) {
    background-color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  }
}
.message-bubble {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.message-bubble:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.dark .message-bubble:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.controls button:focus-visible {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-ring-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-outline-style: none;
  outline-style: none;
  &:is(.dark *) {
    --tw-ring-offset-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
@media (max-width: 640px) {
  .conversation-box {
    padding: calc(var(--spacing, 0.25rem) * 2);
  }
  .message-content {
    max-width: 85% !important;
  }
  .controls {
    padding-top: calc(var(--spacing, 0.25rem) * 3);
  }
  .controls button {
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
}
.blog-content .amazon-product-card {
  max-width: 400px;
  padding: 24px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin: 32px 0;
  position: relative;
}
.dark .blog-content .amazon-product-card {
  background: #1f2937;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.blog-content .amazon-product-card.recommended-card {
  border: 2px solid #3182ce;
}
.blog-content .recommended-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: #3182ce;
}
.blog-content .amazon-product-card .product-image-area {
  width: 120px;
  height: 120px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dark .blog-content .amazon-product-card .product-image-area {
  background: #111827;
}
.blog-content .amazon-product-card .product-image-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.blog-content .amazon-product-card .product-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 16px;
}
.dark .blog-content .amazon-product-card .product-title {
  color: #f3f4f6;
}
.blog-content .amazon-product-card .product-features {
  margin-bottom: 24px;
  list-style: none !important;
  padding: 0 !important;
}
.blog-content .amazon-product-card .product-features li {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.5;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
  list-style: none !important;
}
.dark .blog-content .amazon-product-card .product-features li {
  color: #cbd5e0;
}
.blog-content .amazon-product-card .product-features li::before {
  content: "●";
  color: #3182ce;
  font-size: 8px;
  position: absolute;
  left: 0;
  top: 7px;
}
.blog-content .amazon-product-card .product-features li::marker {
  content: none;
}
.blog-content .amazon-product-card .amazon-buy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #2d3748;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: background 0.2s ease;
}
.blog-content .amazon-product-card .amazon-buy-button:hover {
  background: #1a202c;
}
.blog-content .amazon-product-card .amazon-buy-button::after {
  content: none !important;
}
.blog-content .amazon-product-card .amazon-arrow {
  margin-right: 8px;
}
.blog-content .amazon-product-card .product-sub-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.blog-content .amazon-product-card .rakuten-buy-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid #bf0000;
  color: #bf0000 !important;
  background: transparent;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.blog-content .amazon-product-card .rakuten-buy-button:hover {
  background: #bf0000;
  color: #ffffff !important;
}
.blog-content .amazon-product-card .yahoo-buy-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid #4338ca;
  color: #4338ca !important;
  background: transparent;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.blog-content .amazon-product-card .yahoo-buy-button:hover {
  background: #4338ca;
  color: #ffffff !important;
}
.blog-content .amazon-product-card .rakuten-buy-button::after,
.blog-content .amazon-product-card .yahoo-buy-button::after {
  content: none !important;
}
@media (max-width: 380px) {
  .blog-content .amazon-product-card {
    padding: 16px;
  }
  .blog-content .amazon-product-card .product-title {
    font-size: 18px;
  }
  .blog-content .amazon-product-card .product-features li {
    font-size: 13px;
  }
}
.blog-content .amazon-simple-card {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  display: flex;
  gap: calc(var(--spacing, 0.25rem) * 4);
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  padding: calc(var(--spacing, 0.25rem) * 4);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}
.dark .blog-content .amazon-simple-card {
  border-color: #374151;
}
.blog-content .amazon-simple-card:hover {
  border-color: #ff9900;
  box-shadow: 0 4px 16px rgba(255, 153, 0, 0.15);
}
.blog-content .amazon-simple-card .simple-image {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 24);
  width: calc(var(--spacing, 0.25rem) * 24);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  @media (width >= 48rem) {
    height: calc(var(--spacing, 0.25rem) * 32);
  }
  @media (width >= 48rem) {
    width: calc(var(--spacing, 0.25rem) * 32);
  }
  &:is(.dark *) {
    background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  }
}
.blog-content .amazon-simple-card .simple-image img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: calc(var(--spacing, 0.25rem) * 2);
}
.blog-content .amazon-simple-card .simple-info {
  display: flex;
  min-width: calc(var(--spacing, 0.25rem) * 0);
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.blog-content .amazon-simple-card .simple-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  @media (width >= 48rem) {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  }
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-content .amazon-simple-card .simple-price {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  }
  color: #b12704;
}
.dark .blog-content .amazon-simple-card .simple-price {
  color: #ff6b6b;
}
.blog-content .amazon-simple-card .simple-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  align-self: flex-start;
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(180deg, #ffd814 0%, #ffa41c 100%);
  color: #0f1111;
  text-decoration: none !important;
}
.blog-content .amazon-simple-card .simple-button:hover {
  background: linear-gradient(180deg, #f7ca00 0%, #ff8c00 100%);
  text-decoration: none !important;
}
.blog-content .amazon-simple-card .simple-button::after {
  content: none !important;
}
.blog-content .product-grid {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  display: grid;
  gap: calc(var(--spacing, 0.25rem) * 4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blog-content .product-grid-item {
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  background-color: var(--color-white, #fff);
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}
.dark .blog-content .product-grid-item {
  border-color: #374151;
}
.blog-content .product-grid-item:hover {
  border-color: #ff9900;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 153, 0, 0.15);
}
.blog-content .product-grid-item .grid-image {
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 48);
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing, 0.25rem) * 4);
  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
}
.dark .blog-content .product-grid-item .grid-image {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
.blog-content .product-grid-item .grid-image img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.blog-content .product-grid-item .grid-content {
  padding: calc(var(--spacing, 0.25rem) * 4);
}
.blog-content .product-grid-item .grid-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-content .product-grid-item .grid-price {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #b12704;
}
.dark .blog-content .product-grid-item .grid-price {
  color: #ff6b6b;
}
.blog-content .product-grid-item .grid-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  border-radius: var(--radius);
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(180deg, #ffd814 0%, #ffa41c 100%);
  color: #0f1111;
  text-decoration: none !important;
}
.blog-content .product-grid-item .grid-button:hover {
  background: linear-gradient(180deg, #f7ca00 0%, #ff8c00 100%);
  text-decoration: none !important;
}
.blog-content .product-grid-item .grid-button::after {
  content: none !important;
}
.blog-content .recommend-badge {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 3);
  right: calc(var(--spacing, 0.25rem) * 3);
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 3);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
}
.blog-content .recommend-badge.best {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
}
.blog-content .recommend-badge.good {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
}
.blog-content .recommend-badge.value {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.blog-content .star-rating {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 1);
}
.blog-content .star-rating .stars {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  color: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
}
.blog-content .star-rating .rating-count {
  margin-left: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
}
.blog-content .prime-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 1);
  border-radius: 0.25rem;
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-block: calc(var(--spacing, 0.25rem) * 0.5);
  font-size: var(--text-xs, 0.75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  background-color: #232f3e;
  color: #00a8e1;
}
.blog-content .prime-badge svg {
  width: 14px;
  height: 14px;
}
.blog-content .ranking-section {
  margin-block: calc(var(--spacing, 0.25rem) * 10);
}
.blog-content .ranking-section-header {
  margin-bottom: calc(var(--spacing, 0.25rem) * 5);
  padding-bottom: calc(var(--spacing, 0.25rem) * 3);
  border-bottom: 2px solid #333;
}
.dark .blog-content .ranking-section-header {
  border-bottom-color: #e5e5e5;
}
.blog-content .ranking-section-title {
  margin: calc(var(--spacing, 0.25rem) * 0);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
}
.blog-content .ranking-section-budget {
  margin: calc(var(--spacing, 0.25rem) * 0);
  margin-top: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
}
.blog-content .ranking-cards {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing, 0.25rem) * 0);
}
.blog-content .ranking-card {
  display: flex;
  gap: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  border-bottom: 1px solid #e5e7eb;
}
.dark .blog-content .ranking-card {
  border-bottom-color: #374151;
}
.blog-content .ranking-card:last-child {
  border-bottom: none;
}
.blog-content .ranking-rank {
  width: calc(var(--spacing, 0.25rem) * 8);
  flex-shrink: 0;
  text-align: center;
}
.blog-content .ranking-rank-num {
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #111;
}
.dark .blog-content .ranking-rank-num {
  color: #f3f4f6;
}
.blog-content .ranking-card:first-child .ranking-rank-num {
  color: #ca8a04;
}
.blog-content .ranking-card:nth-child(2) .ranking-rank-num {
  color: #6b7280;
}
.blog-content .ranking-card:nth-child(3) .ranking-rank-num {
  color: #b45309;
}
.blog-content .ranking-card-image {
  height: calc(var(--spacing, 0.25rem) * 24);
  width: calc(var(--spacing, 0.25rem) * 24);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.25rem;
  background-color: var(--color-white, #fff);
  border: 1px solid #e5e7eb;
}
.dark .blog-content .ranking-card-image {
  background: #fff;
}
.blog-content .ranking-card-image img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  padding: calc(var(--spacing, 0.25rem) * 1);
}
.blog-content .ranking-card-content {
  min-width: calc(var(--spacing, 0.25rem) * 0);
  flex: 1;
}
.blog-content .ranking-card-name {
  margin: calc(var(--spacing, 0.25rem) * 0);
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-base, 1rem);
  line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-gray-900, oklch(21% 0.034 264.665));
  &:is(.dark *) {
    color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  }
  line-height: 1.4;
}
.blog-content .ranking-card-price {
  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: #dc2626;
}
.blog-content .ranking-card-features {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  &:is(.dark *) {
    color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
  }
}
.blog-content .ranking-card-cta {
  display: inline-block;
  border-radius: 0.25rem;
  padding-inline: calc(var(--spacing, 0.25rem) * 5);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  background: #FFD814;
  color: #111 !important;
  text-decoration: none !important;
  border: 1px solid #FCD200;
}
.blog-content .ranking-card-cta:hover {
  background: #F7CA00;
}
@media (max-width: 640px) {
  .blog-content .ranking-card {
    flex-wrap: wrap;
    padding-block: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .ranking-rank {
    width: calc(var(--spacing, 0.25rem) * 6);
  }
  .blog-content .ranking-rank-num {
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  }
  .blog-content .ranking-card-image {
    height: calc(var(--spacing, 0.25rem) * 20);
    width: calc(var(--spacing, 0.25rem) * 20);
  }
  .blog-content .ranking-card-content {
    margin-top: calc(var(--spacing, 0.25rem) * 3);
    width: 100%;
  }
  .blog-content .ranking-card-cta {
    margin-top: calc(var(--spacing, 0.25rem) * 2);
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .blog-content {
    font-size: 15px;
    line-height: 1.75;
  }
  .blog-content .table-wrapper {
    margin-inline: calc(var(--spacing, 0.25rem) * -2);
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
  }
  .blog-content table th,
  .blog-content table td {
    padding: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
    white-space: nowrap;
  }
  .blog-content .comparison-table {
    margin-inline: calc(var(--spacing, 0.25rem) * -4);
    overflow-x: auto;
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    border-radius: 0;
  }
  .blog-content .comparison-table table {
    min-width: 500px;
  }
  .blog-content .spec-table {
    border-radius: var(--radius);
  }
  .blog-content .spec-table table {
    display: table;
  }
  .blog-content .spec-table th {
    width: 35%;
    padding: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .spec-table td {
    padding: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .spec-table .spec-table-title {
    padding: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .point-box {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius);
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-top: calc(var(--spacing, 0.25rem) * 8);
    padding-bottom: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .point-box::before {
    top: calc(var(--spacing, 0.25rem) * 0);
    left: calc(var(--spacing, 0.25rem) * 3);
    padding-inline: calc(var(--spacing, 0.25rem) * 3);
    padding-block: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content .info-box {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .merit-box,
  .blog-content .demerit-box {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    border-radius: calc(var(--radius) + 4px);
  }
  .blog-content .merit-box::before,
  .blog-content .demerit-box::before {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .merit-box ul,
  .blog-content .demerit-box ul {
    padding-inline: calc(var(--spacing, 0.25rem) * 4);
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .blog-content .merit-box li,
  .blog-content .demerit-box li {
    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
    padding-left: 1.75rem !important;
  }
  .blog-content .summary-box {
    margin-block: calc(var(--spacing, 0.25rem) * 8);
    border-radius: calc(var(--radius) + 4px);
    padding: calc(var(--spacing, 0.25rem) * 5);
  }
  .blog-content .summary-box h3 {
    margin-bottom: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  }
  .blog-content .summary-box .summary-subtitle {
    margin-bottom: calc(var(--spacing, 0.25rem) * 4);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .summary-box ul li {
    padding-left: calc(var(--spacing, 0.25rem) * 7);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .summary-section {
    margin-inline: calc(var(--spacing, 0.25rem) * 0);
    margin-bottom: calc(var(--spacing, 0.25rem) * 4);
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .summary-title {
    gap: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .summary-title::before {
    height: calc(var(--spacing, 0.25rem) * 6);
    width: calc(var(--spacing, 0.25rem) * 6);
  }
  .blog-content .summary-list {
    margin-left: calc(var(--spacing, 0.25rem) * 8);
  }
  .blog-content .summary-list li {
    padding-left: calc(var(--spacing, 0.25rem) * 5);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .qa-section {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius);
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .qa-question {
    margin-bottom: calc(var(--spacing, 0.25rem) * 2);
    gap: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .qa-question::before {
    height: calc(var(--spacing, 0.25rem) * 6);
    width: calc(var(--spacing, 0.25rem) * 6);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content .qa-answer {
    padding-left: calc(var(--spacing, 0.25rem) * 8);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .qa-answer::before {
    height: calc(var(--spacing, 0.25rem) * 6);
    width: calc(var(--spacing, 0.25rem) * 6);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content .amazon-product-card {
    padding: 16px;
  }
  .blog-content .amazon-product-card .product-title {
    font-size: 18px;
  }
  .blog-content .amazon-product-card .product-features li {
    font-size: 13px;
  }
  .blog-content .affiliate-button {
    width: 100%;
    padding-block: calc(var(--spacing, 0.25rem) * 4);
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .cta-button {
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .cta-primary a,
  .blog-content .cta-secondary a {
    padding-inline: calc(var(--spacing, 0.25rem) * 6);
    padding-block: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  }
  .blog-content .review-box {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius);
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .review-box::before {
    top: calc(var(--spacing, 0.25rem) * -2.5);
    left: calc(var(--spacing, 0.25rem) * 4);
    padding-inline: calc(var(--spacing, 0.25rem) * 3);
    padding-block: calc(var(--spacing, 0.25rem) * 1);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content .notice-box {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    padding: calc(var(--spacing, 0.25rem) * 4);
    padding-left: 2.5rem;
  }
  .blog-content .notice-box::before {
    top: calc(var(--spacing, 0.25rem) * 4);
    left: calc(var(--spacing, 0.25rem) * 3);
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  }
  .blog-content .affiliate-link {
    margin-block: calc(var(--spacing, 0.25rem) * 8);
    border-radius: calc(var(--radius) + 4px);
    padding: calc(var(--spacing, 0.25rem) * 6);
  }
  .blog-content h2 {
    margin-top: calc(var(--spacing, 0.25rem) * 10);
    margin-bottom: calc(var(--spacing, 0.25rem) * 6);
    padding: 0.875rem 0.875rem 0.875rem 2rem;
  }
  .blog-content h2::before {
    left: 0.5rem;
    width: 6px;
    height: 6px;
  }
  .blog-content h3 {
    margin-top: calc(var(--spacing, 0.25rem) * 8);
    margin-bottom: calc(var(--spacing, 0.25rem) * 4);
    padding: 0.5rem 0 0.5rem 1rem;
  }
  .blog-content h3::before {
    left: 0;
    width: 3px;
  }
  .blog-content ul:not([class])>li,
  .blog-content ol:not(.blog-content > ol)>li {
    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
    padding-left: calc(var(--spacing, 0.25rem) * 7);
  }
  .blog-content ol:not(.blog-content > ol)>li::before {
    height: calc(var(--spacing, 0.25rem) * 6);
    width: calc(var(--spacing, 0.25rem) * 6);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content img {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    border-radius: var(--radius);
  }
  .blog-content p {
    margin-block: calc(var(--spacing, 0.25rem) * 4);
  }
}
@media (max-width: 480px) {
  .blog-content {
    font-size: 14px;
  }
  .blog-content h2 {
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
  }
  .blog-content h3 {
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
  .blog-content .amazon-product-card .product-title {
    font-size: 16px;
  }
  .blog-content .spec-table th {
    width: 40%;
    padding: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content .spec-table td {
    padding: calc(var(--spacing, 0.25rem) * 2);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
  }
  .blog-content .point-box,
  .blog-content .info-box,
  .blog-content .notice-box {
    padding: calc(var(--spacing, 0.25rem) * 3);
  }
  .blog-content .merit-box ul,
  .blog-content .demerit-box ul {
    padding-inline: calc(var(--spacing, 0.25rem) * 3);
    padding-block: calc(var(--spacing, 0.25rem) * 3);
  }
  .blog-content .qa-answer {
    padding-left: calc(var(--spacing, 0.25rem) * 7);
  }
}
.blog-content .highlight-box {
  position: relative;
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-yellow-50, oklch(98.7% 0.026 102.212));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-amber-50, oklch(98.7% 0.022 95.277));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-yellow-900, oklch(42.1% 0.095 57.708)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-900, oklch(41.4% 0.112 45.904)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
  &:is(.dark *) {
    border-color: var(--color-yellow-400, oklch(85.2% 0.199 91.936));
  }
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blog-content .highlight-box::before {
  content: "⚡";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 4);
  left: calc(var(--spacing, 0.25rem) * -3);
  display: flex;
  height: calc(var(--spacing, 0.25rem) * 8);
  width: calc(var(--spacing, 0.25rem) * 8);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-yellow-500, oklch(79.5% 0.184 86.047));
  text-align: center;
  color: var(--color-white, #fff);
  font-size: 1rem;
  line-height: 2rem;
}
.blog-content .highlight-title {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  margin-left: calc(var(--spacing, 0.25rem) * 4);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-yellow-800, oklch(47.6% 0.114 61.907));
  &:is(.dark *) {
    color: var(--color-yellow-300, oklch(90.5% 0.182 98.111));
  }
}
.blog-content .highlight-content {
  margin-left: calc(var(--spacing, 0.25rem) * 4);
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.dark .blog-content .highlight-box {
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  --tw-shadow-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-yellow-900, oklch(42.1% 0.095 57.708)) 10%, transparent) var(--tw-shadow-alpha), transparent);
  }
}
.blog-content .prediction-box {
  position: relative;
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-indigo-50, oklch(96.2% 0.018 272.314));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-via: var(--color-purple-50, oklch(97.7% 0.014 308.299));
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops);
  --tw-gradient-to: var(--color-pink-50, oklch(97.1% 0.014 343.198));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(35.9% 0.144 278.697) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-indigo-900, oklch(35.9% 0.144 278.697)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-via: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-purple-900, oklch(38.1% 0.176 304.987)) 20%, transparent);
    }
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(40.8% 0.153 2.432) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-pink-900, oklch(40.8% 0.153 2.432)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  border-style: var(--tw-border-style);
  border-width: 2px;
  --tw-border-style: dashed;
  border-style: dashed;
  border-color: var(--color-indigo-300, oklch(78.5% 0.115 274.713));
  &:is(.dark *) {
    border-color: var(--color-indigo-600, oklch(51.1% 0.262 276.966));
  }
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: calc(var(--radius) + 4px);
  padding: calc(var(--spacing, 0.25rem) * 6);
}
.blog-content .prediction-header {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-indigo-700, oklch(45.7% 0.24 277.023));
  &:is(.dark *) {
    color: var(--color-indigo-300, oklch(78.5% 0.115 274.713));
  }
}
.blog-content .prediction-header::before {
  content: "🔮";
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
}
.blog-content .prediction-content {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .prediction-content ul {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
  padding-left: calc(var(--spacing, 0.25rem) * 0);
}
.blog-content .prediction-content li {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing, 0.25rem) * 2);
}
.blog-content .trend-box {
  position: relative;
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: calc(var(--radius) + 4px);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blog-content .trend-header {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.blog-content .trend-icon {
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
}
.blog-content .trend-content {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .trend-box.trend-up {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-emerald-50, oklch(97.9% 0.021 166.113));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-green-50, oklch(98.2% 0.018 155.826));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(37.8% 0.077 168.94) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-900, oklch(37.8% 0.077 168.94)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  border-color: var(--color-emerald-500, oklch(69.6% 0.17 162.48));
  &:is(.dark *) {
    border-color: var(--color-emerald-400, oklch(76.5% 0.177 163.223));
  }
}
.blog-content .trend-box.trend-up .trend-header {
  color: var(--color-emerald-700, oklch(50.8% 0.118 165.612));
  &:is(.dark *) {
    color: var(--color-emerald-300, oklch(84.5% 0.143 164.978));
  }
}
.blog-content .trend-box.trend-down {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-rose-50, oklch(96.9% 0.015 12.422));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-red-50, oklch(97.1% 0.013 17.38));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(41% 0.159 10.272) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-rose-900, oklch(41% 0.159 10.272)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-red-900, oklch(39.6% 0.141 25.723)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  border-color: var(--color-rose-500, oklch(64.5% 0.246 16.439));
  &:is(.dark *) {
    border-color: var(--color-rose-400, oklch(71.2% 0.194 13.428));
  }
}
.blog-content .trend-box.trend-down .trend-header {
  color: var(--color-rose-700, oklch(51.4% 0.222 16.935));
  &:is(.dark *) {
    color: var(--color-rose-300, oklch(81% 0.117 11.638));
  }
}
.blog-content .comparison-box {
  --tw-gradient-position: to bottom right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-slate-50, oklch(98.4% 0.003 247.858));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(20.8% 0.042 265.755) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-slate-900, oklch(20.8% 0.042 265.755)) 40%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-gray-800, oklch(27.8% 0.033 256.848)) 40%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-slate-200, oklch(92.9% 0.013 255.508));
  &:is(.dark *) {
    border-color: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  }
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: calc(var(--radius) + 4px);
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blog-content .comparison-header {
  margin-bottom: calc(var(--spacing, 0.25rem) * 4);
  padding-bottom: calc(var(--spacing, 0.25rem) * 3);
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  &:is(.dark *) {
    color: var(--color-slate-300, oklch(86.9% 0.022 252.894));
  }
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  border-color: var(--color-slate-200, oklch(92.9% 0.013 255.508));
  &:is(.dark *) {
    border-color: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  }
}
.blog-content .comparison-content {
  color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  &:is(.dark *) {
    color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  }
}
.blog-content .comparison-content table {
  width: 100%;
}
.blog-content .comparison-content th {
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  text-align: left;
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-slate-600, oklch(44.6% 0.043 257.281));
  &:is(.dark *) {
    color: var(--color-slate-400, oklch(70.4% 0.04 256.788));
  }
}
.blog-content .comparison-content td {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-slate-100, oklch(96.8% 0.007 247.896));
  padding-block: calc(var(--spacing, 0.25rem) * 2);
  &:is(.dark *) {
    border-color: var(--color-slate-700, oklch(37.2% 0.044 257.287));
  }
}
.blog-content img[src*="/charts/"] {
  margin-inline: auto;
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: calc(var(--radius) + 4px);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  max-width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .blog-content .highlight-box,
  .blog-content .prediction-box,
  .blog-content .trend-box,
  .blog-content .comparison-box {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
    padding: calc(var(--spacing, 0.25rem) * 4);
  }
  .blog-content .highlight-title,
  .blog-content .prediction-header,
  .blog-content .trend-header,
  .blog-content .comparison-header {
    font-size: var(--text-base, 1rem);
    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-leading: initial;
      --tw-space-y-reverse: 0;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-tracking: initial;
    }
  }
}
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
.blog-content .misconception-box {
  margin: 2rem 0;
  padding: 0;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #dee2e6;
  overflow: hidden;
}
.blog-content .misconception-box h3 {
  margin: 0;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #212529;
  background: #e9ecef;
  border-bottom: 1px solid #dee2e6;
}
.blog-content .misconception-item {
  padding: 1.5rem;
  border-bottom: 1px solid #e9ecef;
}
.blog-content .misconception-item:last-child {
  border-bottom: none;
}
.blog-content .misconception {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.blog-content .misconception:last-child {
  margin-bottom: 0;
}
.blog-content .misconception-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.blog-content .misconception-icon.wrong {
  color: #dc3545;
}
.blog-content .misconception-icon.correct {
  color: #28a745;
}
.blog-content .misconception-text {
  flex: 1;
}
.blog-content .misconception-label {
  font-size: 0.75rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}
.blog-content .misconception-label.wrong {
  color: #dc3545;
  background: #f8d7da;
}
.blog-content .misconception-label.correct {
  color: #155724;
  background: #d4edda;
}
.blog-content .misconception-content {
  color: #495057;
  line-height: 1.6;
  font-size: 1rem;
}
.blog-content .difference-box {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f0f7ff;
  border-radius: 8px;
  border: 1px solid #b3d9ff;
}
.blog-content .difference-box h3 {
  margin: 0 0 1.5rem 0;
  padding: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: bold;
  color: #0056b3;
  border-bottom: 2px solid #cce5ff;
}
.blog-content .difference-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: white;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}
.blog-content .difference-item:last-child {
  margin-bottom: 0;
}
.blog-content .difference-label {
  font-weight: 600;
  color: #495057;
  font-size: 1rem;
}
.blog-content .difference-value {
  color: #0066cc;
  font-weight: 500;
  font-size: 1rem;
}
@media (max-width: 640px) {
  .blog-content .difference-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .blog-content .difference-value {
    padding-left: 0;
    font-size: 0.95rem;
  }
}
.blog-content .summary-box {
  margin: 3rem 0;
  padding: 2.5rem;
  background: #FDFBF7;
  border-radius: 12px;
  border: 2px solid #E6E6E6;
  box-shadow: 4px 4px 0px 0px #E6E1D6;
  position: relative;
}
.blog-content .summary-box h3 {
  margin: 0 0 2rem 0;
  padding: 0 0 1rem 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #57534E;
  text-align: center;
  border-bottom: 2px solid #E6E6E6;
  font-family: var(--font-noto-sans-jp), serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.blog-content .summary-box h3::before {
  content: '📝';
  font-size: 1.5rem;
}
.blog-content .summary-section {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #F5F5F4;
}
.blog-content .summary-section:last-child {
  margin-bottom: 0;
}
.blog-content .summary-title {
  font-size: 1.125rem;
  font-weight: bold;
  color: #44403C;
  margin-bottom: 0.5rem;
  font-family: var(--font-noto-sans-jp), serif;
}
.blog-content .summary-subtitle {
  font-size: 0.875rem;
  color: #EA580C;
  font-weight: 600;
  margin-bottom: 1rem;
}
.blog-content .summary-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.blog-content .summary-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.75rem;
  color: #57534E;
  line-height: 1.8;
  font-weight: 500;
}
.blog-content .summary-list li:last-child {
  margin-bottom: 0;
}
.blog-content .summary-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #EA580C;
  font-weight: bold;
  font-size: 1.1em;
}
/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
@layer properties;
.blog-content blockquote {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  border-radius: var(--radius);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  border-color: var(--color-blue-500, oklch(62.3% 0.214 259.815));
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-blue-50, oklch(97% 0.014 254.604));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: color-mix(in srgb, oklch(97% 0.014 254.604) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-blue-50, oklch(97% 0.014 254.604)) 70%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  padding: calc(var(--spacing, 0.25rem) * 6);
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(37.9% 0.146 265.522) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-blue-900, oklch(37.9% 0.146 265.522)) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  position: relative;
}
.blog-content blockquote p {
  margin: calc(var(--spacing, 0.25rem) * 0);
}
.blog-content blockquote p strong {
  margin-bottom: calc(var(--spacing, 0.25rem) * 3);
  display: block;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-700, oklch(48.8% 0.243 264.376));
  &:is(.dark *) {
    color: var(--color-blue-300, oklch(80.9% 0.105 251.813));
  }
}
.blog-content blockquote ul {
  margin-top: calc(var(--spacing, 0.25rem) * 3);
  margin-left: calc(var(--spacing, 0.25rem) * 0);
  list-style-type: none;
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content blockquote ul li {
  position: relative;
  padding-left: calc(var(--spacing, 0.25rem) * 6);
}
.blog-content blockquote ul li::before {
  content: "✓";
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
}
.blog-content .warning-box {
  border-color: var(--color-amber-500, oklch(76.9% 0.188 70.08));
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-amber-50, oklch(98.7% 0.022 95.277));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: color-mix(in srgb, oklch(98.7% 0.022 95.277) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-amber-50, oklch(98.7% 0.022 95.277)) 70%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(41.4% 0.112 45.904) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-900, oklch(41.4% 0.112 45.904)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(41.4% 0.112 45.904) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-amber-900, oklch(41.4% 0.112 45.904)) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
}
.blog-content .warning-box p strong {
  color: var(--color-amber-700, oklch(55.5% 0.163 48.998));
  &:is(.dark *) {
    color: var(--color-amber-300, oklch(87.9% 0.169 91.605));
  }
}
.blog-content .warning-box ul li::before {
  color: var(--color-amber-600, oklch(66.6% 0.179 58.318));
  &:is(.dark *) {
    color: var(--color-amber-400, oklch(82.8% 0.189 84.429));
  }
}
.blog-content .tip-box {
  border-color: var(--color-green-500, oklch(72.3% 0.219 149.579));
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-green-50, oklch(98.2% 0.018 155.826));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: color-mix(in srgb, oklch(98.2% 0.018 155.826) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-green-50, oklch(98.2% 0.018 155.826)) 70%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(39.3% 0.095 152.535) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-green-900, oklch(39.3% 0.095 152.535)) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
}
.blog-content .tip-box p strong {
  color: var(--color-green-700, oklch(52.7% 0.154 150.069));
  &:is(.dark *) {
    color: var(--color-green-300, oklch(87.1% 0.15 154.449));
  }
}
.blog-content .tip-box ul li::before {
  color: var(--color-green-600, oklch(62.7% 0.194 149.214));
  &:is(.dark *) {
    color: var(--color-green-400, oklch(79.2% 0.209 151.711));
  }
}
.blog-content .check-box {
  border-color: var(--color-purple-500, oklch(62.7% 0.265 303.9));
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-purple-50, oklch(97.7% 0.014 308.299));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: color-mix(in srgb, oklch(97.7% 0.014 308.299) 70%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-gradient-to: color-mix(in oklab, var(--color-purple-50, oklch(97.7% 0.014 308.299)) 70%, transparent);
  }
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  &:is(.dark *) {
    --tw-gradient-from: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-900, oklch(38.1% 0.176 304.987)) 20%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  &:is(.dark *) {
    --tw-gradient-to: color-mix(in srgb, oklch(38.1% 0.176 304.987) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-purple-900, oklch(38.1% 0.176 304.987)) 10%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
}
.blog-content .check-box p strong {
  color: var(--color-purple-700, oklch(49.6% 0.265 301.924));
  &:is(.dark *) {
    color: var(--color-purple-300, oklch(82.7% 0.119 306.383));
  }
}
.blog-content .check-box ul li::before {
  color: var(--color-purple-600, oklch(55.8% 0.288 302.321));
  &:is(.dark *) {
    color: var(--color-purple-400, oklch(71.4% 0.203 305.504));
  }
}
.blog-content table {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: var(--radius);
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.blog-content table thead {
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.blog-content table th {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 2px;
  border-color: var(--color-gray-300, oklch(87.2% 0.01 258.338));
  padding: calc(var(--spacing, 0.25rem) * 3);
  text-align: left;
  --tw-font-weight: var(--font-weight-semibold, 600);
  font-weight: var(--font-weight-semibold, 600);
  &:is(.dark *) {
    border-color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
  }
}
.blog-content table td {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  padding: calc(var(--spacing, 0.25rem) * 3);
  &:is(.dark *) {
    border-color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
  }
}
.blog-content table tbody tr:nth-child(even) {
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-800, oklch(27.8% 0.033 256.848)) 50%, transparent);
    }
  }
}
.blog-content table tbody tr:hover {
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  &:is(.dark *) {
    background-color: color-mix(in srgb, oklch(37.3% 0.034 259.733) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-gray-700, oklch(37.3% 0.034 259.733)) 50%, transparent);
    }
  }
}
.blog-content p a[href^="http"]:only-child {
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  display: inline-block;
  border-radius: calc(infinity * 1px);
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-indigo-600, oklch(51.1% 0.262 276.966));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-indigo-700, oklch(45.7% 0.24 277.023));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  padding-inline: calc(var(--spacing, 0.25rem) * 10);
  padding-block: calc(var(--spacing, 0.25rem) * 4);
  text-align: center;
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  &:hover {
    @media (hover: hover) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-gradient-from: var(--color-indigo-700, oklch(45.7% 0.24 277.023));
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-gradient-to: var(--color-indigo-800, oklch(39.8% 0.195 277.366));
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  min-width: 300px;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
  letter-spacing: 0.5px;
}
.blog-content p a[href^="http"]:only-child::after {
  content: " →";
  display: inline-block;
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
}
.blog-content p a[href^="http"]:only-child:hover::after {
  transform: translateX(5px);
}
.blog-content p a[href*="amazon"]:only-child,
.blog-content p a[href*="amzn"]:only-child {
  --tw-gradient-position: to right in oklab;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: var(--color-orange-500, oklch(70.5% 0.213 47.604));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  --tw-gradient-to: var(--color-orange-600, oklch(64.6% 0.222 41.116));
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  color: var(--color-white, #fff);
  &:hover {
    @media (hover: hover) {
      --tw-gradient-from: var(--color-orange-600, oklch(64.6% 0.222 41.116));
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  &:hover {
    @media (hover: hover) {
      --tw-gradient-to: var(--color-orange-700, oklch(55.3% 0.195 38.402));
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }
  }
  box-shadow: 0 4px 20px rgba(251, 146, 60, 0.4);
}
.blog-content p strong:first-child:last-child {
  font-size: var(--text-lg, 1.125rem);
  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
  color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  &:is(.dark *) {
    color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
  }
}
.blog-content strong {
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
}
.blog-content h2 {
  margin-top: calc(var(--spacing, 0.25rem) * 16);
  margin-bottom: calc(var(--spacing, 0.25rem) * 8);
  font-size: var(--text-2xl, 1.5rem);
  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-3xl, 1.875rem);
    line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
  }
  position: relative;
  background: #fff7ed;
  border: 2px dashed #d6d3d1;
  border-radius: 2px;
  padding: 1rem 1.5rem;
  color: #44403c;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
}
.dark .blog-content h2 {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}
.blog-content h2::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 120px;
  height: 24px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 4px 4px;
  z-index: 10;
}
.blog-content h2::after {
  content: none;
}
.blog-content h3 {
  margin-top: calc(var(--spacing, 0.25rem) * 10);
  margin-bottom: calc(var(--spacing, 0.25rem) * 6);
  display: inline-block;
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  @media (width >= 48rem) {
    font-size: var(--text-2xl, 1.5rem);
    line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
  }
  padding: 0 0.5rem;
  border: none;
  background: linear-gradient(transparent 60%, rgba(253, 186, 116, 0.4) 60%);
  color: #44403c;
  border-radius: 0;
}
.dark .blog-content h3 {
  color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  background: linear-gradient(transparent 60%, rgba(251, 146, 60, 0.3) 60%);
}
.blog-content h3::before {
  content: none;
}
.blog-content ul {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  list-style-type: none;
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content ol {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  list-style-position: inside;
  list-style-type: decimal;
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing, 0.25rem) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing, 0.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.blog-content ul li {
  position: relative;
  list-style-type: none;
  padding-left: calc(var(--spacing, 0.25rem) * 6);
}
.blog-content ul li::before {
  content: "▶";
  position: absolute;
  left: calc(var(--spacing, 0.25rem) * 0);
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-indigo-500, oklch(58.5% 0.233 277.117));
}
.blog-content blockquote ul li::before {
  content: "✓";
  color: var(--color-blue-600, oklch(54.6% 0.245 262.881));
  &:is(.dark *) {
    color: var(--color-blue-400, oklch(70.7% 0.165 254.624));
  }
}
.blog-content pre {
  margin-block: calc(var(--spacing, 0.25rem) * 6);
  overflow-x: auto;
  border-radius: var(--radius);
  background-color: var(--color-gray-900, oklch(21% 0.034 264.665));
  padding: calc(var(--spacing, 0.25rem) * 4);
  color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
}
.blog-content code {
  border-radius: 0.25rem;
  background-color: var(--color-gray-100, oklch(96.7% 0.003 264.542));
  padding-inline: calc(var(--spacing, 0.25rem) * 2);
  padding-block: calc(var(--spacing, 0.25rem) * 1);
  font-size: var(--text-sm, 0.875rem);
  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
  &:is(.dark *) {
    background-color: var(--color-gray-800, oklch(27.8% 0.033 256.848));
  }
}
.blog-content pre code {
  background-color: transparent;
  padding: calc(var(--spacing, 0.25rem) * 0);
}
.blog-content .youtube-embed-container {
  position: relative;
  margin-inline: auto;
  margin-block: calc(var(--spacing, 0.25rem) * 8);
  width: 100%;
  max-width: 800px;
  padding-bottom: 56.25%;
}
.blog-content .youtube-embed {
  position: absolute;
  top: calc(var(--spacing, 0.25rem) * 0);
  left: calc(var(--spacing, 0.25rem) * 0);
  height: 100%;
  width: 100%;
  border-radius: var(--radius);
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border: none;
}
@media (max-width: 768px) {
  .blog-content .youtube-embed-container {
    margin-block: calc(var(--spacing, 0.25rem) * 6);
  }
}
.blog-content p a.btn-primary,
.blog-content .cta-box a.btn-primary,
.blog-content .summary-box a.btn-primary {
  margin-block: calc(var(--spacing, 0.25rem) * 4);
  display: inline-block;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing, 0.25rem) * 10);
  padding-block: calc(var(--spacing, 0.25rem) * 5);
  text-align: center;
  font-size: var(--text-xl, 1.25rem);
  line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
  --tw-font-weight: var(--font-weight-bold, 700);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-white, #fff);
  text-decoration-line: none;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  background: linear-gradient(to bottom, #FFECB3 0%, #FFC107 50%, #FFB300 100%);
  color: #422006;
  border: 1px solid #FFB300;
  box-shadow: 0 4px 0 #B7791F, 0 10px 10px rgba(0, 0, 0, 0.1);
  min-width: 320px;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.blog-content p a.btn-primary:hover,
.blog-content .cta-box a.btn-primary:hover,
.blog-content .summary-box a.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #B7791F, 0 15px 20px rgba(255, 193, 7, 0.4);
  background: linear-gradient(to bottom, #FFF8E1 0%, #FFCA28 50%, #FFC107 100%);
  color: #422006;
}
.blog-content p a.btn-primary:active,
.blog-content .cta-box a.btn-primary:active,
.blog-content .summary-box a.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #B7791F, 0 5px 5px rgba(0, 0, 0, 0.1);
}
.blog-content p a.btn-primary::after,
.blog-content .cta-box a.btn-primary::after,
.blog-content .summary-box a.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}
@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 200%;
  }
  100% {
    left: 200%;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
      --tw-space-y-reverse: 0;
      --tw-duration: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
    }
  }
}