:root {
      --bg: #fff5f8;
      --paper: #fff;
      --ink: #443135;
      --muted: #856e75;
      --line: #f3cfd9;
      --line2: #f8e4ea;
      --pink: #f45b86;
      --rose: #d94f73;
      --soft: #ffe7ee;
      --beige: #fff8f1;
      --shadow: 0 24px 58px rgba(187, 88, 111, .16);
      --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
      --round: "Klee One", "Hiragino Maru Gothic ProN", sans-serif;
    }
    * { box-sizing: border-box; }
    html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      font-family: var(--sans);
      line-height: 1.75;
      letter-spacing: 0;
      background:
        radial-gradient(circle at 12% 8%, rgba(255, 209, 221, .9), transparent 22rem),
        radial-gradient(circle at 88% 14%, rgba(255, 239, 231, .9), transparent 24rem),
        linear-gradient(180deg, #fff7fa 0%, #fff 48%, #fff6f9 100%);
      overflow-x: hidden;
    }
    body::before {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background-image:
        radial-gradient(circle, rgba(244, 91, 134, .12) 0 1.4px, transparent 1.8px),
        radial-gradient(circle, rgba(101, 81, 91, .08) 0 1px, transparent 1.4px);
      background-size: 42px 42px, 68px 68px;
      mask-image: linear-gradient(#000, transparent 72%);
      content: "";
    }
    a { color: inherit; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    a, button {
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    [hidden] { display: none !important; }
    .shell { width: min(100%, 920px); margin: 0 auto; padding: 12px 14px 70px; }
    .topbar {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 12px;
      background: rgba(255, 250, 252, .9);
      border-bottom: 1px solid rgba(243, 207, 217, .74);
      backdrop-filter: blur(14px);
    }
    .home-link, .social-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      color: #6f5058;
      font-size: 12px;
      font-weight: 800;
      text-decoration: none;
      padding: 0 12px;
    }
    .top-social {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .social-icon {
      width: 36px;
      padding: 0;
      font-size: 13px;
      line-height: 1;
    }
    .social-icon.x { color: #fff; border-color: #1b171b; background: #1b171b; }
    .social-icon.threads { color: #fff; border-color: #3b3034; background: #3b3034; }
    .brand { color: var(--rose); font-family: var(--round); font-weight: 600; font-size: 13px; }
    .hero {
      padding: 16px 0 22px;
      text-align: center;
    }
    .hero-art {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: #fff;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255, 255, 255, .82);
    }
    .hero-art img { display: block; width: 100%; height: auto; }
    .hero-copy {
      width: min(100% - 22px, 760px);
      margin: 12px auto 0;
      position: relative;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 16px 36px rgba(160, 76, 98, .12);
      padding: 18px 16px 20px;
    }
    .kicker {
      display: inline-block;
      color: var(--rose);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .12em;
    }
    h1 {
      margin: 8px 0 8px;
      font-family: var(--round);
      font-size: clamp(30px, 8vw, 54px);
      line-height: 1.18;
      letter-spacing: 0;
      color: #4f383d;
    }
    .lead {
      margin: 0 auto;
      max-width: 620px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 600;
      line-height: 1.9;
    }
    .primary-btn, .share-btn, .option-card, .scale-btn, .nav-btn {
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
      user-select: none;
      -webkit-user-select: none;
    }
    .primary-btn, .share-btn, .nav-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      border-radius: 999px;
      padding: 0 20px;
      font-weight: 900;
      text-decoration: none;
    }
    .primary-btn {
      width: min(100%, 360px);
      border: 0;
      color: #fff;
      background: linear-gradient(100deg, #f45b86, #f284a8);
      box-shadow: 0 14px 28px rgba(217, 79, 115, .26);
    }
    .primary-btn:hover, .ghost-btn:hover, .share-btn:hover, .nav-btn:hover, .option-card:hover, .scale-btn:hover {
      transform: translateY(-2px);
    }
    .ghost-btn, .nav-btn {
      border: 1px solid var(--line);
      color: #674c54;
      background: #fff;
    }
    .intro-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
    .mini-note { margin: 10px 0 0; color: #9a7f87; font-size: 12px; font-weight: 700; text-align: center; }
    .card {
      margin-top: 16px;
      padding: clamp(18px, 4vw, 28px);
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255, 255, 255, .92);
      box-shadow: var(--shadow);
    }
    .section-title {
      margin: 0 0 12px;
      font-family: var(--round);
      font-size: clamp(24px, 6vw, 34px);
      line-height: 1.35;
      color: #583d45;
      text-align: center;
    }
    .section-sub {
      margin: 0 auto 18px;
      max-width: 620px;
      color: var(--muted);
      font-size: 14px;
      text-align: center;
    }
    .mode-grid, .gender-grid {
      display: grid;
      gap: 12px;
    }
    .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .option-card {
      position: relative;
      width: 100%;
      min-height: 150px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: linear-gradient(180deg, #fff, #fff7fa);
      color: var(--ink);
      text-align: left;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(173, 91, 108, .09);
    }
    .option-card strong { display: block; color: var(--rose); font-size: 20px; }
    .option-card span { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.75; }
    .option-card small {
      display: inline-flex;
      margin-top: 12px;
      border-radius: 999px;
      background: var(--soft);
      color: #9d4d63;
      font-size: 12px;
      font-weight: 900;
      padding: 4px 10px;
    }
    .gender-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gender-grid .option-card { min-height: 92px; text-align: center; padding: 14px 10px; }
    .gender-grid .option-card strong { font-size: 16px; color: #5f444b; }
    .progress-head {
      position: sticky;
      top: 54px;
      z-index: 15;
      margin: 0 -4px 14px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255, 250, 252, .96);
      box-shadow: 0 12px 26px rgba(171, 91, 110, .12);
      backdrop-filter: blur(14px);
      padding: 12px;
    }
    .progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      color: #8c6c75;
      font-size: 12px;
      font-weight: 900;
    }
    .progress-meta b { color: var(--rose); }
    .progress-bar {
      height: 10px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #f7dbe3;
    }
    .progress-bar span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #f45b86, #ffa0b9);
      transition: width .24s ease;
    }
    .question-card {
      min-height: 520px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .category-pill {
      align-self: center;
      display: inline-flex;
      border-radius: 999px;
      background: var(--soft);
      color: #a3485f;
      font-size: 12px;
      font-weight: 900;
      padding: 5px 12px;
    }
    .question-text {
      margin: 0;
      font-family: var(--round);
      font-size: clamp(24px, 6vw, 36px);
      line-height: 1.55;
      text-align: center;
      color: #4f373f;
    }
    .scale-wrap { margin-top: auto; }
    .scale-labels {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
      color: #8f727a;
      font-size: 12px;
      font-weight: 800;
    }
    .scale-row {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
    }
    .scale-btn {
      min-height: 64px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      color: #6d4d56;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(172, 92, 110, .08);
    }
    .scale-btn b {
      display: block;
      color: var(--rose);
      font-size: 18px;
      line-height: 1;
    }
    .scale-btn.selected {
      color: #fff;
      border-color: #f45b86;
      background: linear-gradient(180deg, #f45b86, #ee799d);
      box-shadow: 0 14px 28px rgba(217, 79, 115, .24);
    }
    .scale-btn.selected b { color: #fff; }
    .quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
    .nav-btn { min-width: 116px; border: 1px solid var(--line); }
    .nav-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
    .result-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      gap: 18px;
      align-items: center;
    }
    .age-box {
      text-align: center;
      border: 1px dashed rgba(244, 91, 134, .36);
      border-radius: 24px;
      background: linear-gradient(180deg, #fff, #fff5f8);
      padding: 20px 14px;
    }
    .age-label { color: var(--rose); font-size: 13px; font-weight: 900; }
    .age-number {
      font-family: var(--round);
      font-size: clamp(74px, 22vw, 126px);
      line-height: 1;
      color: var(--pink);
      text-shadow: 0 10px 22px rgba(244, 91, 134, .18);
    }
    .age-number small { font-size: .24em; }
    .type-name {
      margin: 6px 0 0;
      font-family: var(--round);
      font-size: clamp(25px, 7vw, 40px);
      line-height: 1.3;
    }
    .catch {
      margin: 10px auto 0;
      max-width: 520px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }
    .chart-card {
      min-width: 0;
      width: 280px;
      height: 280px;
      min-height: 0;
      display: grid;
      place-items: center;
    }
    .radar {
      width: 100% !important;
      max-width: 280px;
      height: 100% !important;
      max-height: 280px;
      margin: 0 auto;
      display: block;
    }
    .result-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .result-card h3, .about-card h2 {
      margin: 0 0 8px;
      color: #a9475d;
      font-size: 17px;
      line-height: 1.45;
    }
    .result-card p, .about-card p {
      margin: 0;
      color: #6f5860;
      font-size: 14px;
      line-height: 1.9;
    }
    .result-card ul {
      margin: 0;
      padding-left: 1.1em;
      color: #6f5860;
      font-size: 14px;
      line-height: 1.8;
    }
    .mode-note {
      display: none;
      border: 1px solid #f3cfd9;
      border-radius: 18px;
      background: #fff8fb;
      color: #835d67;
      font-size: 13px;
      font-weight: 700;
      padding: 12px 14px;
      text-align: center;
    }
    .mode-note.show { display: block; }
    .share-actions, .related-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }
    .share-btn.x { color: #fff; background: #161319; border: 1px solid #161319; }
    .share-btn.threads { color: #fff; background: #3b3034; border: 1px solid #3b3034; }
    .share-btn.copy { color: #684b54; background: #fff; border: 1px solid var(--line); }
    .related-links a {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #6b4e56;
      background: #fff;
      font-size: 13px;
      font-weight: 900;
      text-decoration: none;
      padding: 0 15px;
    }
    .about-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }
    .about-card {
      border: 1px solid var(--line2);
      border-radius: 20px;
      background: #fff;
      padding: 18px;
    }
    .axis-guide h2 {
      margin: 0 0 8px;
      color: #a9475d;
      font-size: 20px;
      line-height: 1.45;
      text-align: center;
    }
    .axis-guide > p {
      margin: 0 auto 16px;
      max-width: 650px;
      color: #6f5860;
      font-size: 14px;
      line-height: 1.9;
      text-align: center;
    }
    .axis-guide-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .axis-guide-item {
      border: 1px solid var(--line2);
      border-radius: 18px;
      background: linear-gradient(180deg, #fff, #fff9fb);
      padding: 15px;
    }
    .axis-guide-item h3 {
      margin: 0 0 8px;
      color: #573d45;
      font-size: 15px;
      line-height: 1.45;
    }
    .axis-guide-item p {
      margin: 6px 0 0;
      color: #6f5860;
      font-size: 13px;
      line-height: 1.75;
    }
    .axis-guide-item b {
      color: var(--rose);
      font-weight: 900;
    }
    footer {
      margin-top: 28px;
      padding: 28px 14px 40px;
      color: #765d65;
      text-align: center;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.62);
    }
    .footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 12px; }
    .footer-links a { font-size: 13px; font-weight: 800; text-decoration: none; }
    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 30;
      transform: translateX(-50%) translateY(16px);
      opacity: 0;
      pointer-events: none;
      border-radius: 999px;
      background: #1c171a;
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      padding: 12px 18px;
      transition: opacity .24s ease, transform .24s ease;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
    @media (max-width: 720px) {
      .shell { padding-inline: 10px; }
      .hero-art { border-radius: 20px; }
      .mode-grid, .result-hero, .result-grid, .about-grid, .axis-guide-grid { grid-template-columns: 1fr; }
      .gender-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .progress-head { top: 52px; }
      .question-card { min-height: 480px; }
    }
    @media (max-width: 430px) {
      .top-social { gap: 5px; }
      .social-icon { width: 34px; min-height: 34px; font-size: 12px; }
      .brand { font-size: 12px; }
      .hero-copy { width: calc(100% - 10px); margin-top: 10px; padding: 16px 12px 18px; }
      .card { border-radius: 20px; padding: 16px 12px; }
      .scale-row { gap: 6px; }
      .scale-btn { min-height: 60px; border-radius: 15px; font-size: 11px; padding: 4px 2px; }
      .scale-btn b { font-size: 17px; }
      .scale-labels { font-size: 11px; }
      .result-hero { gap: 12px; }
      .chart-card { width: min(100%, 260px); height: 260px; margin: 0 auto; }
      .radar { max-width: 260px; max-height: 260px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }

.tcs-static{position:relative;z-index:2;max-width:680px;margin:26px auto;padding:0 16px}
  .tcs-card{background:rgba(255,255,255,.94);border:1px solid #d4488f44;border-radius:18px;padding:20px 18px;margin:18px 0;box-shadow:0 8px 22px rgba(60,40,110,.10)}
  .tcs-card h2{margin:0 0 10px;color:#2b2735;font-size:1.25rem}
  .tcs-card h3{color:#d4488f;border-bottom:1px solid #d4488f44;padding-bottom:6px;margin:24px 0 8px;font-size:1.05rem}
  .tcs-card p,.tcs-card li,.tcs-card dd{line-height:1.92;font-size:.94rem;color:#2b2735;margin:6px 0}
  .tcs-axes{display:grid;gap:12px;margin:14px 0}
  .tcs-axes dt{font-weight:800;color:#d4488f;margin-bottom:2px}
  .tcs-axes dd{margin:0;color:#6f687e}
  .tcs-item{border:1px solid #d4488f44;border-radius:14px;padding:14px 16px;margin:12px 0;background:rgba(255,255,255,.75)}
  .tcs-item h4{margin:0 0 4px;font-size:1.03rem;color:#2b2735;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
  .tcs-sub{font-size:.72rem;font-weight:700;color:#6f687e;letter-spacing:.05em}
  .tcs-catch{font-weight:700;color:#d4488f;margin:2px 0 8px}
  .tcs-label{font-weight:700;margin:8px 0 2px;color:#2b2735}
  .tcs-item ul{margin:0;padding-left:1.2em;color:#6f687e}
  .tcs-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;padding:0;list-style:none}
  .tcs-tags li,.tcs-tag{font-size:.74rem;font-weight:700;color:#d4488f;border:1px solid currentColor;border-radius:999px;padding:2px 10px}
  .tcs-note{color:#6f687e;font-size:.86rem;border-top:1px dashed #d4488f44;padding-top:8px;margin-top:10px}
  .tcs-column p{line-height:2}
.tc-diagnosis-shell{position:relative;z-index:2;width:min(680px,calc(100% - 32px));margin:32px auto 64px}
.tc-diagnosis-card{background:#fff;border:1px solid rgba(20,20,40,.12);border-radius:20px;padding:24px 20px;box-shadow:0 16px 40px rgba(20,20,40,.12)}
.tc-diagnosis-progress{height:10px;border-radius:999px;background:rgba(120,120,140,.18);overflow:hidden}.tc-diagnosis-progress>i{display:block;height:100%;width:0;background:var(--accent,#765bd8);transition:width .2s ease}
.tc-diagnosis-count{text-align:right;margin:8px 0 18px;font-weight:700}.tc-diagnosis-question{font-size:clamp(19px,5vw,26px);line-height:1.6;margin:0 0 20px;white-space:pre-line}
.tc-diagnosis-image{display:none;width:100%;max-height:300px;object-fit:cover;border-radius:12px;margin:0 0 18px}.tc-diagnosis-image[src]{display:block}
.tc-diagnosis-answer{display:flex;width:100%;min-height:52px;align-items:center;text-align:left;padding:14px 16px;margin:10px 0;border:1px solid rgba(20,20,40,.16);border-radius:12px;background:#fff;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.tc-diagnosis-answer:hover,.tc-diagnosis-answer:focus-visible{border-color:var(--accent,#765bd8);outline:3px solid color-mix(in srgb,var(--accent,#765bd8) 22%,transparent)}
.tc-diagnosis-back{min-height:44px;margin-top:12px;border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer}
.tc-result-card h1{font-size:clamp(25px,7vw,38px);line-height:1.45;margin:8px 0}.tc-result-catch{font-size:18px;font-weight:700}.tc-result-section{margin:20px 0;padding-top:18px;border-top:1px solid rgba(20,20,40,.12)}
.tc-result-section h2{font-size:18px;margin:0 0 8px}.tc-result-section p{white-space:pre-line}.tc-result-section ul{padding-left:1.3em}.tc-result-section li+li{margin-top:6px}
.tc-result-visual{display:block;width:min(220px,70%);height:auto;margin:0 auto 14px}.tc-result-number{display:grid;place-items:center;width:130px;aspect-ratio:1;margin:0 auto 14px;border-radius:50%;background:var(--accent,#765bd8);color:#fff;font-size:44px;font-weight:900}
.tc-result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.tc-result-actions a,.tc-result-actions button{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:10px 16px;border:1px solid rgba(20,20,40,.18);border-radius:999px;background:#fff;color:inherit;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.tc-result-actions .primary{background:#17171d;color:#fff}
@media(max-width:480px){.tc-diagnosis-shell{width:min(100% - 20px,680px);margin-top:20px}.tc-diagnosis-card{padding:20px 16px;border-radius:16px}}
@media(prefers-reduced-motion:reduce){.tc-diagnosis-progress>i{transition:none}}

.tc-compat-start{display:flex;width:min(420px,calc(100% - 32px));min-height:52px;align-items:center;justify-content:center;margin:24px auto;padding:12px 20px;border-radius:999px;background:#17171d;color:#fff;font-weight:700;text-decoration:none;position:relative;z-index:10}