:root {
  color-scheme: light;
  --ground: #f6eee4;
  --peach: #fff0dc;
  --paper: #fff;
  --ink: #202124;
  --ink-soft: #6e645d;
  --ink-faint: #9b928a;
  --accent: #f06a11;
  --accent-soft: #fff6ef;
  --line: #ef9b4d;
  --line-soft: #f2d4bb;
  --line-neutral: #d8d5d0;
  --rail: #efb16e;
  --masthead: #1d1d1d;
  --radar-grid: #eadfd5;
  --radar-fill: rgba(240, 106, 17, .14);
  --quote-rail: #ff5747;
  --quote-bg: #fff5ef;
  --tag-border: #eccaa9;
  --tag-ink: #b45b22;
  --tag-bg: #fffaf6;
  --link: #3977ff;
  --qr-line: #7da0ff;
  --qr-bg: #eef3ff;
  --radius-panel: 4px;
  --radius-metric: 12px;
  --radius-pill: 999px;
  --font: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ground); color: var(--ink); }
body { font-family: var(--font); }

.report { width: min(750px, 100vw); margin: 0 auto; overflow-x: clip; background: var(--peach); border-left: 1px dashed var(--rail); border-right: 1px dashed var(--rail); }
.masthead { height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--masthead); color: var(--paper); }
.masthead strong { font-size: 27px; font-weight: 500; }
.masthead span { margin-top: 14px; font-size: 28px; letter-spacing: .01em; }
.sheet { margin: 32px; padding: 28px 24px 38px; background: var(--paper); border: 1px solid var(--line-neutral); border-radius: var(--radius-panel); box-shadow: 0 3px 10px rgba(37, 30, 20, .08); }
.panel { border: 1.5px solid var(--line); border-radius: var(--radius-panel); background: var(--paper); }
.section-title { margin: 0 0 22px; font-size: 25px; font-weight: 650; }

.hero { position: relative; min-height: 745px; padding: 54px 28px 30px; text-align: center; }
.level-pill { position: absolute; top: 20px; left: 22px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--masthead); color: var(--paper); font-size: 12px; font-weight: 750; }
.level-pill strong { color: var(--accent); }
.hero__lead { margin: 0; font-size: 36px; letter-spacing: .02em; }
.hero h1 { margin: 25px 0 0; font-size: 67px; line-height: 1; font-weight: 750; overflow-wrap: anywhere; }
.hero h1 span { display: block; margin-top: 18px; color: var(--accent); font-size: 54px; font-weight: 550; }
.hero__description { max-width: 590px; margin: 10px auto 0; font-size: 24px; line-height: 1.55; font-weight: 600; }
.portrait-image { display: block; width: 355px; height: 338px; margin: 24px auto 6px; }
.portrait-image--contain { object-fit: contain; }
.portrait-image--cover { object-fit: cover; }

.capability { min-height: 690px; margin-top: 18px; padding: 30px 25px 24px; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.metric { min-width: 0; min-height: 158px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-metric); background: var(--accent-soft); }
.metric__label { margin: 0; color: var(--ink-soft); font-size: 17px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.metric__value { display: flex; flex-wrap: wrap; align-items: baseline; min-height: 74px; margin: 6px 0 0; color: var(--accent); line-height: 1; }
.metric__value strong { font-size: 64px; font-weight: 800; letter-spacing: -.05em; }
.metric__value span { margin-left: 8px; color: var(--ink); font-size: 21px; font-weight: 700; }
.metric__value--rank span:first-child { margin: 0 6px 0 0; font-size: 18px; }
.metric__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.metric-chip { display: inline-flex; margin: 0; padding: 4px 9px; border: 1px solid var(--tag-border); border-radius: var(--radius-pill); color: var(--tag-ink); background: var(--paper); font-size: 12px; font-weight: 650; }
.metric-link { color: var(--link); font-size: 12px; font-weight: 650; }
.metric-status { margin-left: auto; color: var(--ink-faint); font-size: 12px; }

.radar { display: block; width: 500px; height: 410px; margin: 14px auto 0; overflow: visible; }
.radar .rings polygon { fill: none; stroke: var(--radar-grid); stroke-width: 2; }
.radar .axes line { stroke: var(--radar-grid); stroke-width: 2; }
.radar .shape { fill: var(--radar-fill); stroke: var(--accent); stroke-width: 5; stroke-linejoin: round; }
.radar .nodes circle { fill: var(--accent); }
.radar text { font-size: 18px; font-weight: 700; fill: #252525; }
.radar text tspan + tspan { font-size: 15px; font-weight: 600; }
.method-note { margin: -2px 0 0; text-align: center; color: var(--ink-faint); font-size: 12px; }

.snapshot { padding: 34px 26px 30px; }
.snapshot__list { margin: 0; padding: 0; }
.snapshot__term { margin: 24px 0 0; color: var(--accent); font-size: 15px; font-weight: 750; letter-spacing: .08em; }
.snapshot__term:first-of-type { margin-top: 0; }
.snapshot__detail { margin: 8px 0 0; font-size: 22px; line-height: 1.6; font-weight: 550; overflow-wrap: anywhere; }

.style { margin-top: 18px; padding: 30px 24px; }
.phrase-label { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; font-weight: 700; }
.phrases { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.phrases li { padding: 8px 14px; border-radius: 5px; background: var(--accent); color: var(--paper); font-size: 18px; font-weight: 700; }
.ai-voice-portrait { margin: 0; padding: 19px 22px; border-left: 6px solid var(--quote-rail); background: var(--quote-bg); color: #4f4945; font-size: 23px; line-height: 1.6; font-weight: 600; }
.celebrity { margin-top: 32px; padding-top: 28px; border-top: 1px solid #eee4dc; }
.celebrity__lead { margin: 0; font-size: 23px; }
.celebrity h3 { margin: 14px 0 20px; color: var(--accent); font-size: 38px; line-height: 1.25; overflow-wrap: anywhere; }
.celebrity__weights { margin-top: -10px; color: var(--ink-faint); font-size: 13px; }
.celebrity__description { font-size: 22px; line-height: 1.7; font-weight: 520; }
.disclaimer { color: var(--ink-faint); font-size: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 13px; margin: 24px 0 0; padding: 0; list-style: none; }
.tags li { padding: 11px 20px; border: 1px solid var(--tag-border); border-radius: var(--radius-pill); color: var(--tag-ink); background: var(--tag-bg); font-size: 17px; font-weight: 650; }

.share { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 24px; align-items: center; margin-top: 18px; padding: 31px 28px; background: var(--paper); }
.share p { margin: 0; font-size: 25px; line-height: 1.5; }
.share__link { display: block; min-height: 28px; margin-top: 12px; color: var(--ink-faint); font-size: 14px; overflow-wrap: anywhere; }
.qr-placeholder { position: relative; width: 118px; height: 118px; border: 2px solid var(--qr-line); border-radius: 3px; background: var(--qr-bg); }
.qr-placeholder::before, .qr-placeholder::after { content: ""; position: absolute; width: 22px; height: 22px; border: 3px solid var(--qr-line); }
.qr-placeholder::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.qr-placeholder::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.receipt { padding: 25px 0 5px; text-align: center; color: var(--ink-faint); font-size: 12px; letter-spacing: .04em; }

@media (max-width: 900px) {
  .report { width: 100vw; }
  .radar { width: 100%; height: auto; aspect-ratio: 6 / 5; }
  .capability, .hero { min-height: 0; }
}

@media (max-width: 750px) {
  .masthead { height: auto; min-height: 20vw; padding: 16px 4vw; text-align: center; }
  .masthead strong { font-size: clamp(18px, 3.6vw, 27px); }
  .masthead span { margin-top: 1.9vw; font-size: clamp(18px, 3.73vw, 28px); }
  .sheet { margin: 4.2vw; padding: 3.7vw 3.2vw 5vw; }
  .section-title { font-size: clamp(18px, 3.33vw, 25px); }
  .hero { padding: 8vw 3.73vw 4vw; }
  .level-pill { top: 2.7vw; left: 2.9vw; font-size: clamp(9px, 1.6vw, 12px); }
  .hero__lead { font-size: clamp(20px, 4.8vw, 36px); }
  .hero h1 { font-size: clamp(32px, 8.93vw, 67px); }
  .hero h1 span { font-size: clamp(26px, 7.2vw, 54px); }
  .hero__description { font-size: clamp(16px, 3.2vw, 24px); }
  .portrait-image { width: 100%; max-width: 355px; height: auto; aspect-ratio: 355 / 338; margin: 3.2vw auto .8vw; }
  .capability { padding: 4vw 3.33vw 3.2vw; }
  .metrics { gap: 1.8vw; }
  .metric { min-height: 0; padding: 2.4vw 2.6vw; }
  .metric__label { font-size: clamp(12px, 2.27vw, 17px); }
  .metric__value { min-height: 10vw; }
  .metric__value strong { font-size: clamp(38px, 8.53vw, 64px); }
  .metric__value span { font-size: clamp(14px, 2.8vw, 21px); }
  .metric-chip, .metric-status, .metric-link { font-size: clamp(9px, 1.6vw, 12px); }
  .radar { width: 88%; }
  .snapshot { padding: 4.5vw 3.33vw 4vw; }
  .snapshot__term { font-size: clamp(11px, 2vw, 15px); }
  .snapshot__detail { font-size: clamp(16px, 2.93vw, 22px); }
  .style { padding: 4vw 3.2vw; }
  .phrases, .tags { gap: 8px; }
  .phrases li, .tags li { padding: 8px 12px; font-size: clamp(13px, 2.27vw, 17px); }
  .ai-voice-portrait { padding: 2.67vw 2.93vw; font-size: clamp(16px, 3.07vw, 23px); }
  .celebrity { margin-top: 4vw; padding-top: 3.7vw; }
  .celebrity__lead { font-size: clamp(16px, 3.07vw, 23px); }
  .celebrity h3 { font-size: clamp(22px, 5.07vw, 38px); }
  .celebrity__description { font-size: clamp(16px, 2.93vw, 22px); }
  .share { grid-template-columns: minmax(0, 1fr) clamp(48px, 15.7vw, 118px); gap: 3.2vw; padding: 4.13vw 3.73vw; }
  .share p { font-size: clamp(16px, 3.33vw, 25px); }
  .qr-placeholder { width: 100%; height: auto; aspect-ratio: 1; }
}