.ins {
  width: 100%;
  max-width: calc(var(--content) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.ins-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 540px;
  padding: var(--nav-h) 0 0;
  overflow: hidden;
  isolation: isolate;
}
.ins-hero__bg { position: absolute; inset: 0; z-index: -1; }
.ins-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.ins-hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .4);
}
.ins-hero__eyebrow {
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
}
.ins-hero__title {
  margin-top: 24px;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.41;
  letter-spacing: -.04em;
  color: #fff;
}
.ins-hero__sub {
  margin-top: 24px;
  font-size: clamp(14px, 1.4vw, 16.5px);
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, .88);
}
@media (max-width: 900px) { .ins-hero { min-height: 420px; } }

.ins-list { padding: clamp(56px, 6.5vw, 120px) 0 clamp(72px, 8vw, 120px); background: #fff; }

.ins-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 40px;
}
.ins-cats a {
  display: inline-flex;
  align-items: center;
  height: 37px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--ink-20);
  color: var(--ink-80);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.ins-cats a:hover { background: #E7E9EE; }
.ins-cats a.is-on { background: var(--violet); color: #fff; }

.ins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 700px) { .ins-grid { grid-template-columns: 1fr; gap: 36px; } }

.ins-card { display: flex; flex-direction: column; }
.ins-card__thumb {
  aspect-ratio: 390 / 220;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-20);
}
.ins-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.ins-card:hover .ins-card__thumb img { transform: scale(1.04); }

.ins-card__meta {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-60);
}
.ins-card__meta i { font-style: normal; color: var(--ink-40); }

.ins-card__title {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -.03em;
  color: var(--ink-80);
  transition: color .2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ins-card:hover .ins-card__title { color: var(--violet); }

.ins-card__sum {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-60);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ins-empty {
  padding: 80px 0;
  text-align: center;
  color: var(--ink-60);
}

.ins-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
}
.ins-pager__nums { display: flex; gap: 4px; }
.ins-pager__nums a,
.ins-pager__nums span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 33px;
  height: 39px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-60);
  transition: background-color .2s ease, color .2s ease;
}
.ins-pager__nums a:hover { color: var(--violet); }
.ins-pager__nums .is-on { background: var(--ink-20); color: var(--ink-80); }

.ins-pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 39px;
  color: var(--ink-40);
  transition: color .2s ease;
}
.ins-pager__arrow:hover { color: var(--violet); }
.ins-pager__arrow.is-off { opacity: .35; pointer-events: none; }

.ins-prog {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 59;
  height: 3px;
}
.ins-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--violet);
  transition: width .25s linear;
}

.ins-post {
  padding-top: calc(var(--nav-h) + 56px);
  padding-bottom: clamp(72px, 8vw, 120px);
  background: #fff;
}

.ins-post__back {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-60);
}
.ins-post__back:hover { color: var(--violet); }

.ins-post__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 18px; }
.ins-post__cats a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  border-radius: 100px;
  background: var(--white-violet);
  color: var(--violet);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ins-post__cats a:hover { background: var(--violet); color: #fff; }

.ins-post__title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.04em;
  color: var(--ink-80);
}
.ins-post__date {
  margin: 18px 0 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-60);
}
.ins-post__hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 44px;
}

.ins-body { font-size: 17px; line-height: 1.85; color: var(--ink-70); }
.ins-body > *:first-child { margin-top: 0; }
.ins-body p { margin: 0 0 22px; }
.ins-body h2 {
  margin: 52px 0 18px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.03em;
  color: var(--ink-80);
}
.ins-body h3 {
  margin: 34px 0 12px;
  font-size: 18.5px;
  font-weight: 800;
  color: var(--ink-80);
}
.ins-body strong { color: var(--ink); font-weight: 700; }
.ins-body a {
  color: var(--violet);
  font-weight: 600;
  border-bottom: 1.5px solid rgba(94, 59, 252, .3);
}
.ins-body ul, .ins-body ol { margin: 0 0 22px; padding-left: 4px; }
.ins-body li { position: relative; margin-bottom: 10px; padding-left: 20px; }
.ins-body li.is-num  { padding-left: 26px; }
.ins-body li.is-task { padding-left: 24px; }
.ins-body li > .m { position: absolute; left: 0; color: var(--violet); }
.ins-body li.is-done { color: var(--ink-60); }
.ins-body blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--violet);
  font-size: 17.5px;
  color: var(--ink-80);
}
.ins-body .ins-callout {
  display: flex;
  gap: 12px;
  margin: 30px 0;
  padding: 20px 24px;
  border-radius: 14px;
  background: var(--ink-20);
  color: var(--ink-80);
}
.ins-callout__icon { flex: none; font-size: 20px; line-height: 31px; }
.ins-callout__body { flex: 1; min-width: 0; }
.ins-callout__body > :first-child { margin-top: 0; }
.ins-callout__body > :last-child,
.ins-callout__body > :last-child > li:last-child { margin-bottom: 0; }
.ins-body .ins-toggle { margin: 30px 0; }
.ins-toggle > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}
.ins-toggle > summary::-webkit-details-marker { display: none; }
.ins-toggle > summary::before {
  content: "▸";
  flex: none;
  color: var(--violet);
  transition: transform .15s;
}
.ins-toggle[open] > summary::before { transform: rotate(90deg); }
.ins-toggle > summary > h2,
.ins-toggle > summary > h3 { margin: 0; }
.ins-toggle__body { padding: 14px 0 0 22px; }
.ins-toggle__body > :first-child { margin-top: 0; }
.ins-toggle__body > :last-child,
.ins-toggle__body > :last-child > li:last-child { margin-bottom: 0; }
.ins-body hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.ins-body code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--white-violet);
  color: var(--violet);
  font-size: .92em;
}
.ins-body pre {
  margin: 0 0 24px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--ink-deep);
  color: #EDE9F5;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
}
.ins-body pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.ins-body figure { margin: 36px 0; }
.ins-body figure img { width: 100%; height: auto; border-radius: 16px; }
.ins-body figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-60);
  text-align: center;
}