:root {
      --bg: #fff7fc;
      --ink: #39243d;
      --muted: #806d86;
      --line: #ead7ed;
      --panel: rgba(255,255,255,.88);
      --pink: #f36a9d;
      --pink2: #ff9fc5;
      --lav: #a790e8;
      --blue: #9bc7ff;
      --navy: #262954;
      --serif: "Shippori Mincho", "Yu Mincho", serif;
      --body: "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(--body);
      background:
        radial-gradient(circle at 14% 9%, rgba(255, 166, 211, .46), transparent 26rem),
        radial-gradient(circle at 86% 16%, rgba(170, 151, 236, .42), transparent 29rem),
        linear-gradient(180deg, #fff8fd 0%, #f4efff 46%, #fff7fb 100%);
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      opacity: .46;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 0 2px, transparent 2.5px),
        radial-gradient(circle, rgba(176,151,232,.6) 0 1px, transparent 1.8px);
      background-size: 44px 44px, 67px 67px;
      mask-image: linear-gradient(#000, transparent 78%);
    }
    a { color: inherit; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    [hidden] { display: none !important; }
    .wrap { width: min(100%, 820px); margin: auto; padding: 18px 14px 64px; }
    .screen { animation: rise .45s ease both; }
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .hero { text-align: center; padding: 16px 4px 10px; }
    .hero-logo {
      display: block;
      width: min(100%, 720px);
      height: auto;
      margin: auto;
      filter: drop-shadow(0 16px 25px rgba(77,63,131,.17));
    }
    .lead {
      max-width: 650px;
      margin: 8px auto 22px;
      color: #6f5e77;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.9;
      text-align: center;
    }
    .card {
      position: relative;
      border: 1px solid rgba(238, 205, 231, .95);
      border-radius: 34px;
      background: var(--panel);
      box-shadow: 0 24px 58px rgba(128, 85, 140, .14), inset 0 1px #fff;
      backdrop-filter: blur(16px);
      padding: clamp(22px, 5vw, 38px);
      overflow: hidden;
    }
    .card::before {
      content: "";
      position: absolute;
      inset: 12px;
      border: 1px dashed rgba(243, 162, 204, .52);
      border-radius: 25px;
      pointer-events: none;
    }
    .card > * { position: relative; }
    .intro-title {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(28px, 7vw, 43px);
      line-height: 1.35;
      text-align: center;
      color: #513157;
    }
    .intro-note {
      margin: 12px auto 24px;
      max-width: 560px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
      text-align: center;
    }
    .start-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 64px;
      border: 0;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(105deg, #f66b9d, #b68df0 58%, #8bbdff);
      box-shadow: 0 16px 30px rgba(201, 92, 166, .25), inset 0 1px rgba(255,255,255,.72);
      font-weight: 700;
      font-size: 17px;
      letter-spacing: .06em;
      transition: transform .18s ease, filter .18s ease;
    }
    .start-btn::before { content: "♡"; margin-right: 12px; }
    .start-btn::after { content: "✦"; margin-left: 12px; }
    .start-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
    .small { margin: 14px 0 0; color: #97849c; font-size: 12px; text-align: center; }
    .share-row, .actions, .related-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .share-link, .action, .related-grid a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 0 20px;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
    }
    .share-link.x, .action.x { color: #fff; background: #1e1e29; }
    .share-link.threads, .action.threads { color: #4d3652; background: #fff; border: 1px solid #ead2e4; }
    .quiz-head {
      position: sticky;
      top: 0;
      z-index: 5;
      margin-bottom: 22px;
      padding: 14px 16px;
      border: 1px solid #edd5e6;
      border-radius: 22px;
      background: rgba(255, 250, 253, .94);
      box-shadow: 0 10px 26px rgba(126, 80, 138, .12);
      backdrop-filter: blur(14px);
    }
    .quiz-meta { display: flex; align-items: end; justify-content: space-between; gap: 12px; color: #8c7890; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
    .quiz-meta b { color: #dd4f8e; font-family: var(--serif); font-size: 26px; }
    .progress { height: 9px; margin-top: 10px; border-radius: 999px; background: #f2deec; overflow: hidden; }
    .progress span { display: block; width: 12.5%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--lav), var(--blue)); transition: width .28s ease; }
    .question {
      margin: 34px auto 24px;
      max-width: 650px;
      color: #4c3152;
      font-family: var(--serif);
      font-size: clamp(24px, 6vw, 36px);
      line-height: 1.55;
      text-align: center;
    }
    .question::before {
      content: "QUESTION";
      display: block;
      margin-bottom: 10px;
      color: #da6fa1;
      font-family: var(--body);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .22em;
    }
    .answers { display: grid; gap: 13px; }
    .answer {
      position: relative;
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 14px;
      align-items: center;
      width: 100%;
      min-height: 82px;
      border: 1px solid #ead2e4;
      border-radius: 23px;
      background: rgba(255,255,255,.92);
      color: #563f5a;
      box-shadow: 0 10px 24px rgba(121, 75, 132, .08);
      padding: 14px 50px 14px 14px;
      text-align: left;
      transition: .18s ease;
    }
    .answer::after {
      content: "›";
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: #da5c95;
      font-size: 27px;
      font-weight: 800;
    }
    .answer:hover, .answer:focus-visible {
      outline: none;
      transform: translateY(-2px);
      border-color: #ee91bb;
      background: #fff8fc;
      box-shadow: 0 13px 28px rgba(220, 84, 149, .15);
    }
    .answer-mark {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid #efc9df;
      border-radius: 50%;
      color: #c54c86;
      background: linear-gradient(145deg, #fff, #fde7f3);
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 800;
    }
    .answer-text { line-height: 1.7; }
    .back-btn {
      display: block;
      margin: 22px auto 0;
      border: 0;
      color: #806883;
      background: transparent;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    .result-card {
      margin-top: 4px;
      text-align: center;
    }
    .score {
      margin: 8px 0 0;
      color: #55305f;
      font-family: var(--serif);
      font-size: clamp(96px, 24vw, 168px);
      line-height: .95;
      text-shadow: 0 10px 28px rgba(170, 102, 170, .16);
    }
    .score small { color: #ee619d; font-size: .34em; }
    .score-caption { margin: 0 0 18px; color: #83708a; font-weight: 700; letter-spacing: .16em; }
    .type-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 7px 18px;
      border: 1px solid #f0b7d0;
      border-radius: 999px;
      color: #9b3e74;
      background: #fff2f8;
      box-shadow: 0 8px 18px rgba(228, 101, 162, .14);
      font-weight: 700;
      font-size: 13px;
    }
    .result-title {
      max-width: 620px;
      margin: 24px auto 0;
      color: #4e3155;
      font-family: var(--serif);
      font-size: clamp(30px, 7vw, 48px);
      line-height: 1.38;
    }
    .result-lead {
      max-width: 560px;
      margin: 18px auto 0;
      color: #755f77;
      font-size: 15px;
      line-height: 1.95;
      text-align: left;
    }
    .result-lead p { margin: 0 0 12px; }
    .result-insights {
      display: grid;
      gap: 12px;
      max-width: 560px;
      margin: 18px auto 0;
      text-align: left;
    }
    .insight-card {
      padding: 18px 18px 16px;
      border: 1px solid rgba(238, 202, 229, .9);
      border-radius: 24px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 12px 26px rgba(128, 85, 140, .08);
    }
    .insight-card h3 {
      margin: 0 0 8px;
      color: #6d4b81;
      font-family: var(--serif);
      font-size: 19px;
      letter-spacing: .04em;
    }
    .insight-card p {
      margin: 0;
      color: #63546a;
      font-size: 14px;
      line-height: 1.85;
    }
    .aruaru-list {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .aruaru-list li {
      position: relative;
      padding-left: 1.45em;
      color: #63546a;
      font-size: 14px;
      line-height: 1.75;
    }
    .aruaru-list li::before {
      content: "♡";
      position: absolute;
      left: 0;
      color: #f07aa8;
      font-weight: 700;
    }
    .quote {
      margin: 22px auto 0;
      max-width: 560px;
      border: 1px solid #f0cadc;
      border-radius: 20px;
      background: #fff5fa;
      color: #783b65;
      padding: 17px;
      font-family: var(--serif);
      font-size: 19px;
      line-height: 1.7;
    }
    .hint-box {
      max-width: 560px;
      margin: 18px auto 0;
      padding: 16px;
      border: 1px dashed #dec3d6;
      border-radius: 18px;
      background: #fffafd;
      color: #745f73;
      font-size: 13px;
      line-height: 1.85;
      text-align: left;
    }
    .actions { margin-top: 22px; }
    .action { border: 0; }
    .action.copy { color: #5f4563; background: #fff; border: 1px solid #ead2e4; }
    .action.retry { color: #fff; background: linear-gradient(105deg, #f36a9d, #a790e8); }
    .related, .seo { margin-top: 34px; }
    .section-title {
      margin: 0 0 16px;
      color: #4c3152;
      font-family: var(--serif);
      font-size: 26px;
      text-align: center;
    }
    .related-grid a {
      flex: 1 1 220px;
      min-height: 56px;
      color: #60445f;
      background: #fff;
      border: 1px solid #ead2e4;
      box-shadow: 0 10px 22px rgba(124, 77, 134, .08);
    }
    .seo { text-align: left; }
    .seo h2 { margin: 0 0 14px; color: #4d3153; font-family: var(--serif); font-size: 28px; text-align: center; }
    .seo h3 { margin: 24px 0 9px; color: #b54c84; font-size: 18px; }
    .seo p, .seo li { color: #715d74; font-size: 14px; line-height: 1.9; }
    .seo ul { padding-left: 1.2em; }
    .notice {
      margin-top: 24px;
      border: 1px solid #ead2e4;
      border-radius: 18px;
      background: rgba(255,255,255,.68);
      padding: 14px;
      color: #836f87;
      font-size: 12px;
      line-height: 1.8;
    }
    footer {
      width: min(100%, 820px);
      margin: auto;
      border-top: 1px solid #ecd7e5;
      padding: 28px 18px 45px;
      text-align: center;
      background: rgba(255,249,252,.7);
    }
    footer nav { display: flex; justify-content: center; gap: 12px 20px; flex-wrap: wrap; }
    footer a { color: #6d5069; font-size: 13px; text-decoration: none; }
    footer p { color: #948090; font-size: 12px; line-height: 1.7; }
    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      z-index: 20;
      transform: translate(-50%, 18px);
      opacity: 0;
      pointer-events: none;
      border: 1px solid #e9ccdd;
      border-radius: 999px;
      background: #fff;
      color: #4d3652;
      box-shadow: 0 8px 24px rgba(127,70,115,.16);
      padding: 11px 18px;
      font-size: 13px;
      font-weight: 700;
      transition: .25s;
    }
    .toast.on { opacity: 1; transform: translate(-50%, 0); }
    @media (max-width: 430px) {
      .wrap { padding: 14px 10px 52px; }
      .hero-logo { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; }
      .lead { font-size: 14px; line-height: 1.75; }
      .card { border-radius: 27px; padding: 24px 16px; }
      .card::before { inset: 9px; border-radius: 20px; }
      .answer { grid-template-columns: 38px 1fr; padding-left: 11px; }
      .answer-mark { width: 38px; height: 38px; }
      .share-link, .action { flex: 1 1 135px; padding-inline: 14px; }
    }
    @media (prefers-reduced-motion: reduce) {
      * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    }

.of-static{position:relative;z-index:2;max-width:680px;margin:26px auto;padding:0 16px}
  .of-static-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:20px 18px;box-shadow:0 8px 22px rgba(255,120,180,.10)}
  .of-static h2{margin:0 0 10px}
  .of-static p,.of-static li{line-height:1.9;font-size:.94rem}
  .of-cat-item{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px 16px;margin:12px 0;background:#fffafd}
  .of-cat-item h4{margin:0 0 4px;font-size:1.05rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
  .of-range{font-size:.72rem;font-weight:700;color:#b06a8c}
  .of-catch{font-weight:700;color:#d4488f;margin:2px 0 8px}
  .of-label{font-weight:700;margin:8px 0 2px}
  .of-cat-item ul{margin:0;padding-left:1.2em}
  .of-hint{color:#8a6a7a;font-size:.9rem;border-top:1px dashed rgba(0,0,0,.12);padding-top:8px;margin-top:8px}
  .of-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}}