:root {
  --poi-paper: #eaf2f7;
  --poi-paper-soft: #d8e7f0;
  --poi-surface: rgba(255, 255, 255, 0.62);
  --poi-ink: #071626;
  --poi-ink-soft: #30465e;
  --poi-ink-muted: #6d829a;
  --poi-blue: #174f83;
  --poi-blue-soft: #9bc2e6;
  --poi-warm: #b27425;
  --poi-rule: rgba(72, 118, 154, 0.25);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(87, 139, 180, 0.17), transparent 28rem),
    linear-gradient(180deg, #eef6fb 0%, var(--poi-paper) 46%, #e4eff6 100%);
  color: var(--poi-ink);
}

.site-header,
.site-footer {
  border-color: var(--poi-rule);
  background: color-mix(in srgb, var(--poi-paper) 86%, white 14%);
}

.site-title,
.site-title:visited {
  color: var(--poi-ink);
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: 0;
}

.site-header {
  min-height: 0;
}

.site-header .wrapper {
  display: flex;
  align-items: center;
  min-height: 4rem;
}

.site-nav {
  margin-left: auto;
  line-height: 1.2;
}

.site-nav .page-link {
  color: var(--poi-ink);
  font-size: 0.96rem;
}

.page-content {
  padding-top: 1.5rem;
}

.post {
  max-width: 72rem;
  margin: 0 auto;
}

.post-header {
  position: relative;
  max-width: 64rem;
  margin: 0 auto 1.6rem;
  min-height: clamp(14rem, 26vw, 19.5rem);
  padding: clamp(1.35rem, 3vw, 2.35rem);
  overflow: hidden;
  border: 1px solid var(--poi-rule);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(238, 246, 251, 0.72), rgba(228, 239, 246, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 24px 80px -62px rgba(10, 30, 55, 0.7);
}

.post-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("emotion-hierarchy-tree-watercolor.jpg") 58% 47% / cover no-repeat;
  opacity: 0.84;
}

.post-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(239, 247, 252, 0.88) 0%, rgba(239, 247, 252, 0.64) 37%, rgba(239, 247, 252, 0.2) 68%, rgba(239, 247, 252, 0.06) 100%),
    linear-gradient(180deg, rgba(239, 247, 252, 0.06) 0%, rgba(239, 247, 252, 0.18) 54%, rgba(239, 247, 252, 0.78) 100%),
    radial-gradient(circle at 22% 83%, rgba(255, 255, 255, 0.78), transparent 18rem);
  opacity: 0.96;
}

.post-title {
  position: relative;
  z-index: 2;
  max-width: 48rem;
  margin: 0;
  color: var(--poi-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 2.65vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: 0;
}

.post-meta {
  position: relative;
  z-index: 2;
  margin-top: 0.9rem;
  color: var(--poi-ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-content {
  color: var(--poi-ink-soft);
  font-size: 1.03rem;
  line-height: 1.74;
}

.post-content h2 {
  margin-top: 3.2rem;
  margin-bottom: 1rem;
  color: var(--poi-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.post-content a {
  color: var(--poi-blue);
  text-decoration-color: color-mix(in srgb, var(--poi-blue-soft) 68%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.post-content a:hover {
  color: var(--poi-warm);
  text-decoration-color: var(--poi-warm);
}

.emotion-article {
  max-width: 58rem;
  margin: 0 auto;
}

.emotion-article .article-kicker {
  margin: 0 0 1rem;
  color: var(--poi-warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.emotion-article .article-lede {
  max-width: 48rem;
  color: var(--poi-ink);
  font-size: clamp(1.06rem, 1.35vw, 1.24rem);
  line-height: 1.66;
}

.article-meta {
  display: grid;
  grid-template-columns: minmax(6rem, 0.22fr) 1fr;
  gap: 1rem;
  margin: 2rem 0 1.1rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--poi-rule);
  border-bottom: 1px solid var(--poi-rule);
}

.article-meta span {
  color: var(--poi-ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-meta p {
  margin: 0;
}

.article-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 2rem;
}

.article-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--poi-rule);
  border-radius: 999px;
  background: color-mix(in srgb, white 62%, var(--poi-paper-soft) 38%);
  color: var(--poi-blue);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.article-links a::after {
  content: "↗";
  margin-left: 0.35rem;
  color: var(--poi-warm);
}

.visual-summary {
  margin: 2rem 0 3.4rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--poi-rule);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(222, 236, 246, 0.54)),
    radial-gradient(circle at 86% 10%, rgba(178, 116, 37, 0.08), transparent 18rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 24px 74px -62px rgba(10, 30, 55, 0.72);
}

.visual-summary-header {
  display: grid;
  grid-template-columns: minmax(10rem, 0.25fr) 1fr;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--poi-rule);
}

.visual-summary-header .article-kicker {
  margin: 0;
}

.visual-summary h2 {
  margin: 0;
  color: var(--poi-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.visual-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.visual-card {
  position: relative;
  min-height: 12.5rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--poi-rule) 76%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(230, 241, 248, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.visual-card::before {
  content: "";
  display: block;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(23, 79, 131, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 68% 31%, rgba(178, 116, 37, 0.72) 0 0.24rem, transparent 0.26rem),
    radial-gradient(circle at 35% 64%, rgba(23, 79, 131, 0.74) 0 0.34rem, transparent 0.36rem),
    radial-gradient(circle at 61% 68%, rgba(71, 146, 144, 0.64) 0 0.24rem, transparent 0.26rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(219, 235, 245, 0.68));
}

.visual-card-kicker {
  margin: 0;
  color: var(--poi-warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.visual-card h3 {
  margin: 0.5rem 0 0;
  color: var(--poi-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.23rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.visual-card p:last-child {
  margin: 0.65rem 0 0;
  color: var(--poi-ink-soft);
  font-size: 0.92rem;
  line-height: 1.52;
}

.visual-summary-note {
  margin: 1rem 0 0;
  padding: 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--poi-rule) 68%, transparent);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--poi-ink-soft);
  font-size: 0.95rem;
  line-height: 1.58;
}

.emotion-article img {
  display: block;
  max-width: min(100%, 54rem);
  height: auto;
  margin: 1.45rem auto 2.25rem;
  border: 1px solid var(--poi-rule);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 60px -50px rgba(10, 30, 55, 0.72);
}

.emotion-article p > img,
.emotion-article > p img {
  margin-top: 1.2rem;
}

.custom-select-wrapper {
  display: inline-block;
  position: relative;
  width: min(100%, 16rem);
  margin: 0.55rem 0 0.85rem;
}

.custom-select {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--poi-rule);
  border-radius: 999px;
  background: color-mix(in srgb, white 72%, var(--poi-paper-soft) 28%);
  box-shadow: 0 16px 42px -34px rgba(10, 30, 55, 0.7);
}

.custom-select select {
  appearance: none;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.55rem 2.4rem 0.55rem 0.95rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--poi-ink);
  cursor: pointer;
  font: 600 0.94rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.custom-select::after {
  content: "⌄";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  transform: translateY(-55%);
  pointer-events: none;
  color: var(--poi-warm);
  font-size: 1.1rem;
}

.chart-panel {
  box-sizing: border-box;
  width: 100%;
  margin: 0.75rem auto 2.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--poi-rule);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(226, 239, 247, 0.62)),
    radial-gradient(circle at 84% 12%, rgba(178, 116, 37, 0.09), transparent 18rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 18px 60px -54px rgba(10, 30, 55, 0.7);
  scrollbar-color: color-mix(in srgb, var(--poi-blue-soft) 72%, var(--poi-blue) 28%) transparent;
  scrollbar-width: thin;
}

.chart-panel::-webkit-scrollbar {
  height: 10px;
}

.chart-panel::-webkit-scrollbar-track {
  background: transparent;
}

.chart-panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: color-mix(in srgb, var(--poi-blue-soft) 78%, var(--poi-blue) 22%);
}

#chart0,
#chart1,
#chart2 {
  padding: clamp(0.8rem, 2vw, 1.25rem);
}

#chart0 svg,
#chart2 svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  margin: 0 auto;
}

#chart1 svg {
  display: block;
  min-width: max-content;
  margin: 0 auto;
}

.node circle {
  stroke: rgba(7, 22, 38, 0.16);
  stroke-width: 1px;
}

.node text {
  pointer-events: none;
  fill: var(--poi-ink);
  font-size: 10px;
}

.link {
  stroke: rgba(23, 79, 131, 0.45);
  stroke-opacity: 0.65;
}

.titles {
  fill: var(--poi-ink);
  font-size: 14px;
}

.explanation {
  fill: var(--poi-ink);
  font-size: 20px;
  font-weight: 400;
  text-anchor: middle;
}

path.chord {
  fill-opacity: 0.78;
}

.highlight {
  color: var(--poi-blue);
}

.post-content pre,
.post-content code {
  border-radius: 8px;
}

@media (max-width: 720px) {
  .site-header .wrapper {
    min-height: 4rem;
  }

  .post-header {
    margin-bottom: 1.25rem;
    min-height: clamp(13rem, 52vw, 17rem);
    padding: 1.2rem;
  }

  .post-title {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }

  .article-meta {
    grid-template-columns: 1fr;
  }

  .visual-summary-header {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .visual-summary-grid {
    grid-template-columns: 1fr;
  }

  .visual-card {
    min-height: auto;
  }

  .emotion-article {
    max-width: 100%;
  }
}