:root {
  --miko-ui-blue: #21a9e8;
  --miko-ui-violet: #8d73df;
  --miko-ui-coral: #ee7178;
  --miko-ui-ink: #26303e;
  --miko-ui-line: #d9e2ec;
  --miko-ui-soft: #f5f9fc;
}

/* Shared heading icon tiles */
.page-id-2756 .page-title,
.page-id-2756 .entry-content > h2.wp-block-heading,
.page-id-450 .page-title,
.page-id-450 .entry-content > h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--miko-ui-ink);
}

.page-id-2756 .page-title::before,
.page-id-2756 .entry-content > h2.wp-block-heading::before,
.page-id-450 .page-title::before,
.page-id-450 .entry-content > h2::before {
  display: inline-grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #d7e8f3;
  border-radius: 11px;
  color: var(--miko-ui-blue);
  background: #f0f9fe;
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 5px 14px rgb(38 48 62 / 7%);
}

.page-id-2756 .page-title::before {
  content: "\f233";
}

.page-id-2756 #i-0::before {
  content: "\f005";
}

.page-id-2756 #i-1::before {
  content: "\f14e";
  color: var(--miko-ui-violet);
  border-color: #e2daf8;
  background: #f7f4ff;
}

.page-id-2756 #i-5::before {
  content: "\f017";
  color: var(--miko-ui-coral);
  border-color: #f5dadd;
  background: #fff5f5;
}

.page-id-2756 #i-6::before {
  content: "\f05a";
}

/* Front page */
.page-id-2756 .entry-content > .wp-block-group.is-style-box3 {
  position: relative;
  overflow: hidden;
  border: 1px solid #d5e7f4;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 5%, rgb(33 169 232 / 12%), transparent 34%),
    linear-gradient(135deg, #f7fbff 0%, #edf7ff 100%);
  box-shadow: 0 14px 34px rgb(45 75 105 / 9%);
}

.page-id-2756 .entry-content > .wp-block-group.is-style-box3::after {
  position: absolute;
  top: -36px;
  right: -28px;
  width: 130px;
  height: 130px;
  border: 1px solid rgb(33 169 232 / 18%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.page-id-2756 .entry-content > .wp-block-group.is-style-box3 p,
.page-id-2756 .entry-content > .wp-block-group.is-style-box3 .wp-block-buttons {
  position: relative;
  z-index: 1;
}

.page-id-2756 .entry-content > .wp-block-group.is-style-box3 p:first-child {
  line-height: 1.8;
}

.page-id-2756 .wp-block-buttons .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.page-id-2756 .wp-block-buttons .wp-block-button__link::before {
  font-family: "Font Awesome 5 Free";
  font-size: 0.92em;
  font-weight: 900;
}

.page-id-2756 .wp-block-buttons .wp-block-button:first-child .wp-block-button__link::before {
  content: "\f05a";
}

.page-id-2756 .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link::before {
  content: "\f09b";
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

.page-id-2756 #i-1 + .wp-block-columns {
  gap: 18px;
}

.page-id-2756 #i-1 + .wp-block-columns > .wp-block-column > .wp-block-group {
  min-height: 100%;
  border: 1px solid var(--miko-ui-line);
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f8fbfd);
  box-shadow: 0 10px 24px rgb(45 75 105 / 6%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.page-id-2756 #i-1 + .wp-block-columns > .wp-block-column:nth-child(2) > .wp-block-group {
  background: linear-gradient(145deg, #fff, #faf8ff);
}

.page-id-2756 #i-1 + .wp-block-columns > .wp-block-column:nth-child(3) > .wp-block-group {
  background: linear-gradient(145deg, #fff, #fff8f8);
}

.page-id-2756 #i-1 + .wp-block-columns > .wp-block-column > .wp-block-group:hover {
  transform: translateY(-3px);
  border-color: #bcd9ec;
  box-shadow: 0 14px 30px rgb(45 75 105 / 10%);
}

.page-id-2756 #i-1 + .wp-block-columns h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.page-id-2756 #i-1 + .wp-block-columns h3::before {
  display: inline-grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  color: var(--miko-ui-blue);
  background: #eaf8ff;
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 900;
}

.page-id-2756 #i-2::before {
  content: "\f0c2";
}

.page-id-2756 #i-3::before {
  content: "\f121";
  color: var(--miko-ui-violet) !important;
  background: #f2edff !important;
}

.page-id-2756 #i-4::before {
  content: "\f11c";
  color: var(--miko-ui-coral) !important;
  background: #fff0f1 !important;
}

/* Article index tabs */
.blog .post-tab {
  overflow: hidden;
  border: 1px solid #dce4ec;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgb(45 75 105 / 9%);
}

.blog .post-tab > div {
  transition: color 160ms ease, background 160ms ease;
}

.blog .post-tab > div::before {
  display: inline-block;
  width: 1.3em;
  margin-right: 5px;
  color: var(--miko-ui-blue);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.blog .post-tab .tab1::before {
  content: "\f5fd";
}

.blog .post-tab .tab2::before {
  content: "\f11c";
}

.blog .post-tab .tab3::before {
  content: "\f013";
}

.blog .post-tab .tab4::before {
  content: "\f121";
}

.blog .post-tab > div.tab-active {
  color: #fff;
  background: linear-gradient(120deg, #354052, #26303e);
}

.blog .post-tab > div.tab-active::before {
  color: #65cbf5;
}

.blog .catpost-cards .c_linkto_wrap {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.blog .catpost-cards .c_linkto_wrap:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgb(45 75 105 / 12%);
}

/* Wish list */
.page-id-450 .page-title::before {
  content: "\f0ae";
  color: var(--miko-ui-coral);
  border-color: #f5dadd;
  background: #fff5f5;
}

.page-id-450 #i-0::before {
  content: "\f072";
}

.page-id-450 #i-1::before {
  content: "\f6ec";
  color: var(--miko-ui-violet);
  border-color: #e2daf8;
  background: #f7f4ff;
}

.page-id-450 #i-2::before {
  content: "\f0d0";
  color: var(--miko-ui-coral);
  border-color: #f5dadd;
  background: #fff5f5;
}

.page-id-450 .todo-progress {
  padding: 16px 18px;
  border: 1px solid var(--miko-ui-line);
  border-radius: 13px;
  background: var(--miko-ui-soft);
}

.page-id-450 .entry-content table {
  overflow: hidden;
  border: 1px solid var(--miko-ui-line);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgb(45 75 105 / 5%);
}

.page-id-450 .entry-content thead th {
  background: #f3f7fa;
}

.page-id-450 .entry-content tbody tr {
  transition: background 140ms ease;
}

.page-id-450 .entry-content tbody tr:hover {
  background: #f7fbfe;
}

@media only screen and (max-width: 768px) {
  .page-id-2756 .page-title,
  .page-id-2756 .entry-content > h2.wp-block-heading,
  .page-id-450 .page-title,
  .page-id-450 .entry-content > h2 {
    gap: 9px;
  }

  .page-id-2756 .page-title::before,
  .page-id-2756 .entry-content > h2.wp-block-heading::before,
  .page-id-450 .page-title::before,
  .page-id-450 .entry-content > h2::before {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 13px;
  }

  .page-id-2756 .entry-content > .wp-block-group.is-style-box3 {
    border-radius: 13px;
  }

  .page-id-2756 #i-1 + .wp-block-columns {
    gap: 14px;
  }

  .page-id-2756 #i-1 + .wp-block-columns > .wp-block-column > .wp-block-group {
    border-radius: 12px;
  }

  .blog .post-tab > div::before {
    display: block;
    width: auto;
    margin: 0 0 3px;
  }

  .page-id-450 .todo-progress {
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-id-2756 #i-1 + .wp-block-columns > .wp-block-column > .wp-block-group,
  .blog .catpost-cards .c_linkto_wrap,
  .blog .post-tab > div {
    transition: none;
  }
}