:root {
  color-scheme: light;
  --paper: #fffdf8;
  --paper-deep: #f2eee8;
  --surface: #fffefa;
  --ink: #2f2948;
  --muted: #716b7d;
  --line: #e8e1e5;
  --pink: #d94f7b;
  --pink-pale: #fff0f4;
  --blue: #376ca8;
  --blue-pale: #eef5ff;
  --green: #287d70;
  --green-pale: #eaf8f2;
  --yellow: #8b6510;
  --yellow-pale: #fff6d9;
  --purple: #51417d;
  --teal: #277f82;
  --lavender: #7862a7;
  --radius-small: 9px;
  --radius-medium: 15px;
  --radius-large: 22px;
  --content-width: 1080px;
  --soft-shadow: 0 8px 26px rgba(69, 53, 91, 0.06);
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Inter, ui-sans-serif, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 7% 3%, rgba(210, 190, 242, 0.2), transparent 22rem),
    radial-gradient(circle at 94% 12%, rgba(255, 214, 222, 0.22), transparent 24rem),
    var(--paper);
}
a { color: inherit; text-underline-offset: 0.2em; }
button, input { font: inherit; }
button { border-radius: var(--radius-small); }

.site-header {
  border-bottom: 0;
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner { width: min(var(--content-width), 90vw); min-height: 68px; display: flex; align-items: center; margin: 0 auto; }
.wordmark { color: var(--purple); font-size: 1.35rem; font-weight: 760; letter-spacing: -0.025em; text-decoration: none; }
main { width: min(var(--content-width), 90vw); margin: 0 auto; }
.intro { max-width: 720px; padding: 2.65rem 0 1.65rem; }
.intro h1 { margin: 0; color: var(--ink); font-size: clamp(1.65rem, 2.8vw, 2.15rem); font-weight: 760; line-height: 1.2; letter-spacing: -0.03em; }
.intro p { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.96rem; line-height: 1.65; }
.browser { padding: 0 0 5rem; }
.search { height: 54px; display: flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.88); border: 1px solid #cfc4dc; border-radius: var(--radius-medium); padding: 0 1rem; box-shadow: 0 4px 18px rgba(70, 50, 92, 0.04); }
.search:focus-within { border-color: var(--lavender); outline: 3px solid #eee7fa; outline-offset: 2px; }
.search svg { width: 21px; fill: none; stroke: var(--lavender); stroke-width: 1.8; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.domain-tabs { display: flex; gap: 0.5rem; margin-top: 0.9rem; padding: 0.15rem 0 0.55rem; overflow-x: auto; }
.domain-tabs button { flex: 0 0 auto; cursor: pointer; border: 1px solid transparent; border-radius: 999px; background: #f2eef8; padding: 0.55rem 0.88rem; color: var(--purple); font-size: 0.83rem; font-weight: 650; transition: transform 120ms ease, box-shadow 120ms ease; }
.domain-tabs button:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(61, 45, 81, 0.08); }
.domain-tabs button[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.domain-tabs button[data-domain="Body"] { color: #b93863; background: #ffeaf0; }
.domain-tabs button[data-domain="Social"] { color: #27776f; background: #e5f6ef; }
.domain-tabs button[data-domain="Presentation"] { color: #35649b; background: #eaf2ff; }
.domain-tabs button[data-domain="Self-understanding"] { color: #87650d; background: #fff3ce; }
.domain-tabs button[data-domain="Sexuality"] { color: #704d9b; background: #f0e8fb; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.9rem; color: var(--muted); font-size: 0.72rem; }
.active-filters:empty { display: none; }
.active-filters button { cursor: pointer; border: 1px solid #cbd6df; border-radius: 999px; background: var(--blue-pale); padding: 0.28rem 0.55rem; color: var(--blue); font-size: 0.72rem; }
.active-filters .clear-filters { border-color: transparent; background: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 0.2em; }
.result-count { margin: 1.35rem 0 1rem; color: var(--muted); font-size: 0.82rem; }
.cards { display: grid; gap: 3.4rem; }
.domain-section { display: grid; gap: 1.65rem; }
.domain-title { margin: 0; color: #776b86; font-size: 0.88rem; font-weight: 720; letter-spacing: -0.01em; }
.domain-content { display: grid; gap: 2.7rem; }
.experience-group > summary { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 0.65rem; cursor: pointer; list-style: none; border-radius: 0.45rem; }
.experience-group > summary::-webkit-details-marker { display: none; }
.experience-group > summary::after { width: 0.48rem; height: 0.48rem; flex: 0 0 auto; border-right: 2px solid #aa8fca; border-bottom: 2px solid #aa8fca; content: ""; transform: translateY(-0.12rem) rotate(45deg); transition: transform 140ms ease; }
.experience-group:not([open]) > summary::after { transform: rotate(-45deg); }
.experience-group > summary:hover h2 { color: var(--purple); }
.experience-group > summary:focus-visible { outline: 3px solid #dcccf0; outline-offset: 0.32rem; }
.experience-group h2 { width: fit-content; max-width: 100%; margin: 0; color: var(--ink); font-size: 1.3rem; font-weight: 760; line-height: 1.35; letter-spacing: -0.02em; }
.group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.9rem; margin-top: 1.05rem; }
.card { display: flex; flex-direction: column; min-width: 0; min-height: 232px; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-large); background: rgba(255, 255, 255, 0.82); box-shadow: var(--soft-shadow); transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; }
.card:hover { transform: translateY(-2px); border-color: #d5c8db; box-shadow: 0 11px 30px rgba(69, 53, 91, 0.09); }
.card.tone-dysphoric { border-top: 4px solid #ed91ae; }
.card.tone-euphoric { border-top: 4px solid #7bc7b4; }
.card.tone-preference { border-top: 4px solid #e7c465; }
.card.tone-avoidance-or-control { border-top: 4px solid #7fc6c8; }
.card.tone-adaptation { border-top: 4px solid #b69bd8; }
.card.tone-mixed { border-top: 4px solid #ac91d0; }
.card h3 { margin: 0 0 0.55rem; color: var(--ink); font-size: 1.12rem; font-weight: 720; line-height: 1.34; letter-spacing: -0.012em; }
.claim-link { text-decoration: none; }
.claim-link:hover { color: var(--purple); text-decoration: underline; text-decoration-color: #d9c9ee; text-decoration-thickness: 0.16em; }
.summary { margin: 0; color: #443d50; line-height: 1.55; }
.report-count { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.76rem; }
.variations { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.variations li + li { margin-top: 0.35rem; }
.variations strong { color: var(--ink); }
.categories { display: flex; flex-wrap: wrap; align-items: center; gap: 0.32rem; margin-top: auto; padding-top: 0.9rem; font-size: 0.72rem; }
.category-tag { position: relative; cursor: pointer; padding: 0.24rem 0.5rem; border: 1px solid transparent; border-radius: 999px; font-size: inherit; line-height: 1.2; transition: transform 120ms ease, filter 120ms ease; }
.category-tag:hover { transform: translateY(-1px); filter: saturate(1.08); }
.category-tag[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 1px; }
.category-tag::after { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + 0.4rem); padding: 0.25rem 0.42rem; border-radius: 5px; background: var(--purple); color: #fff; content: attr(data-category-label); font-size: 0.66rem; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 0.2rem); transition: opacity 120ms ease, transform 120ms ease; }
.category-tag:hover::after, .category-tag:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.type-dysphoric { color: #a51f4c; background: var(--pink-pale); border-color: #f3b8ca; }
.type-euphoric { color: var(--green); background: var(--green-pale); border-color: #aee2d2; }
.type-preference { color: var(--yellow); background: var(--yellow-pale); border-color: #efd995; }
.type-avoidance-or-control { color: #14717a; background: #dcf5f5; border-color: #a9dcdf; }
.type-adaptation { color: #64458b; background: #eee5f8; border-color: #d2bce8; }
.population-tag { color: #684398; background: #efe5fc; border-color: #d8c0f2; }
.topic-tag { color: var(--blue); background: var(--blue-pale); border-color: #c5d5f5; }
.sources { margin-top: 0.15rem; padding-top: 0.65rem; }
.sources summary { width: fit-content; cursor: pointer; color: var(--lavender); font-size: 0.8rem; font-weight: 650; }
.source-list { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.source-list li { margin: 0.45rem 0; color: var(--muted); font-size: 0.78rem; }
.source-list a { color: var(--lavender); }
.source-kind { display: inline-block; margin: 0 0.4rem 0.22rem 0; padding: 0.16rem 0.38rem; border-radius: 999px; background: #f1edf7; color: #746487; font-size: 0.64rem; line-height: 1.2; vertical-align: 0.05rem; }
.empty { padding: 3rem 0; color: var(--muted); }

.experience-detail { max-width: 820px; padding: 1.2rem 0 5rem; }
.detail-back { display: inline-block; margin-bottom: 1.6rem; color: var(--lavender); font-size: 0.86rem; font-weight: 650; text-decoration: none; }
.detail-back:hover { text-decoration: underline; }
.detail-context { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.detail-context span { padding: 0.3rem 0.55rem; border-radius: 999px; background: #f1ecf8; color: #6e5a8b; font-size: 0.72rem; font-weight: 650; }
.experience-detail h2 { margin: 0; color: var(--ink); font-size: clamp(1.75rem, 4vw, 2.45rem); line-height: 1.15; letter-spacing: -0.035em; }
.detail-summary { max-width: 720px; margin: 1rem 0 0; color: #494153; font-size: 1.02rem; line-height: 1.7; }
.detail-tags { margin-top: 1.25rem; padding-top: 0; }
.detail-section { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 1rem; color: var(--ink); font-size: 1.05rem; }
.pattern-list { display: grid; gap: 0.7rem; margin: 0; }
.pattern-list div { padding: 0.9rem 1rem; border: 1px solid #e5dee8; border-radius: var(--radius-medium); background: rgba(255, 255, 255, 0.68); }
.pattern-list dt { color: var(--purple); font-size: 0.84rem; font-weight: 720; }
.pattern-list dd { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.detail-variations, .detail-source-list, .related-list { margin: 0; padding-left: 1.15rem; }
.detail-variations li, .detail-source-list li, .related-list li { margin: 0.62rem 0; color: var(--muted); line-height: 1.5; }
.detail-source-list a, .related-list a { color: var(--lavender); }
.source-note { display: block; max-width: 680px; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .header-inner { min-height: 60px; }
  .wordmark { font-size: 1.16rem; }
  .intro { padding-top: 2rem; }
  .domain-tabs { flex-wrap: wrap; overflow: visible; }
  .domain-tabs button { padding: 0.48rem 0.72rem; font-size: 0.78rem; }
  .group-grid { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .categories { margin-top: 0; }
}