/*
 * Design philosophy: 粉金珠寶展廳 / Rose-gold jewelry editorial.
 * Global tokens: blush pink, warm ivory, JMA champagne gold and soft wine text—no black.
 * Motion rule: jewelry should drift, shimmer and reveal in short, tactile transitions.
 */



:root {
  --background: oklch(0.985 0.01 25);
  --foreground: oklch(0.34 0.06 10);
  --card: oklch(0.995 0.005 25);
  --card-foreground: oklch(0.34 0.06 10);
  --popover: oklch(0.995 0.005 25);
  --popover-foreground: oklch(0.34 0.06 10);
  --primary: oklch(0.75 0.12 76);
  --primary-foreground: oklch(0.28 0.05 10);
  --secondary: oklch(0.94 0.035 15);
  --secondary-foreground: oklch(0.38 0.06 10);
  --muted: oklch(0.95 0.025 20);
  --muted-foreground: oklch(0.53 0.055 12);
  --accent: oklch(0.93 0.04 20);
  --accent-foreground: oklch(0.33 0.06 10);
  --destructive: oklch(0.65 0.15 28);
  --destructive-foreground: oklch(0.99 0 0);
  --border: oklch(0.72 0.1 48 / 34%);
  --input: oklch(0.72 0.1 48 / 34%);
  --ring: oklch(0.75 0.12 76);
  --radius: .25rem;
}

* { box-sizing: border-box; }
html { background: #fff8f5; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: #fff8f5;
  color: #5d3944;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button { border: 0; }
button:focus-visible, a:focus-visible { outline: 2px solid #c9944b; outline-offset: 4px; }

.app-root { position: relative; min-height: 100vh; overflow: hidden; background: #fff8f5; }
.ambient-grid { position: fixed; inset: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(rgba(196,139,109,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(196,139,109,.07) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 88%); }
.screen-shell { position: relative; z-index: 1; min-height: 100vh; }
.screen-content { position: relative; z-index: 2; width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.kicker { display: inline-flex; align-items: center; gap: 8px; color: #b77b4e; font-size: 10px; line-height: 1.1; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; }
.kicker__rule { display: inline-block; width: 28px; height: 1px; background: #c9944b; opacity: .72; }
.small-label { display: block; color: #b77b4e; font-size: 9px; letter-spacing: .2em; font-weight: 800; }
.glass-panel { position: relative; overflow: hidden; background: linear-gradient(140deg, rgba(255,255,255,.88), rgba(255,245,240,.87)); border: 1px solid rgba(190,132,97,.38); box-shadow: 0 24px 70px rgba(169,105,92,.15), inset 0 1px rgba(255,255,255,.85); }
.glass-panel::after { content: ""; position: absolute; top: -45%; right: 14%; width: 1px; height: 190%; opacity: .22; background: #cf994b; transform: rotate(35deg); pointer-events: none; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: #5f3b45; }
.brand img { width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(188,122,90,.2)); }
.brand__jma { display: block; font-size: 16px; line-height: 1; letter-spacing: .14em; font-weight: 800; }
.brand__sub { display: block; margin-top: 5px; color: #9b706e; font-size: 7px; letter-spacing: .2em; font-weight: 800; }
.brand--compact img { width: 29px; height: 29px; }
.brand--compact .brand__jma { font-size: 13px; }
.brand--compact .brand__sub { font-size: 6px; margin-top: 3px; }

.progress-rail { position: fixed; z-index: 9; top: 50%; left: 32px; display: flex; flex-direction: column; gap: 23px; transform: translateY(-50%); color: #b58e87; font-size: 9px; letter-spacing: .13em; writing-mode: vertical-rl; text-transform: uppercase; }
.progress-rail__item { display: inline-flex; align-items: center; gap: 9px; position: relative; transition: color .2s ease-out; }
.progress-rail__item.is-active { color: #b77b4e; }
.progress-rail__dot { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid currentColor; border-radius: 999px; font-size: 8px; writing-mode: horizontal-tb; }
.progress-rail__item small { color: #b58e87; font-size: 8px; writing-mode: horizontal-tb; }

.gate-screen { min-height: 820px; display: flex; align-items: stretch; background: radial-gradient(ellipse at 68% 14%, rgba(255,224,224,.45), transparent 42%); }
.gate-topbar { position: absolute; z-index: 4; top: 30px; left: 8%; right: 9%; display: flex; align-items: center; justify-content: space-between; }
.gate-topbar__pass { color: #a67a77; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
.hero-art { position: absolute; top: 0; right: 0; width: 53%; height: 100%; overflow: hidden; background: #f5d8d8; }
.hero-art::after { content: ""; position: absolute; inset: 0; border-left: 1px solid rgba(190,132,97,.17); background: linear-gradient(90deg, #fff8f5 0%, rgba(255,248,245,.72) 10%, transparent 51%), linear-gradient(0deg, #fff8f5 0%, rgba(255,248,245,.1) 31%, rgba(255,235,232,.12) 100%); }
.hero-art img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: .92; animation: heroEnter .9s cubic-bezier(.23,1,.32,1) both; }
.hero-art__wash { position: absolute; z-index: 1; inset: auto 0 0; height: 36%; background: linear-gradient(to top, #fff8f5, rgba(255,248,245,.05)); }
.hero-art__label { position: absolute; z-index: 4; top: 30%; right: 11%; color: rgba(125,82,84,.62); font-size: 9px; letter-spacing: .24em; writing-mode: vertical-rl; }
.pearl-art { position: absolute; z-index: 3; right: 1%; bottom: 10%; width: 32%; max-width: 205px; opacity: .66; mix-blend-mode: multiply; mask-image: radial-gradient(ellipse at center, #000 42%, transparent 73%); -webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 73%); animation: pearlDrift 5.8s ease-in-out infinite; }
.floating-sparkle { position: absolute; z-index: 4; color: #c99147; font-family: Georgia, serif; text-shadow: 0 0 20px rgba(211,158,89,.48); animation: sparkleFloat 3.8s ease-in-out infinite; }
.floating-sparkle--one { top: 24%; left: 54%; font-size: 24px; }.floating-sparkle--two { top: 62%; right: 25%; font-size: 15px; animation-delay: -1.7s; }
.floating-pearl { position: absolute; z-index: 4; display: block; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff 0 9%, #fff3ed 26%, #e9b9b4 66%, #c78e8b 100%); box-shadow: 0 4px 9px rgba(156,92,92,.2); animation: pearlDrift 4.4s ease-in-out infinite; }.floating-pearl--one { top: 19%; right: 31%; }.floating-pearl--two { bottom: 31%; left: 14%; width: 8px; height: 8px; animation-delay: -2.1s; }
.gate-content { display: flex; flex-direction: column; justify-content: center; min-height: 820px; padding: 120px 0 76px 8%; }
.gate-content__intro { max-width: 540px; animation: fadeUp .55s .08s cubic-bezier(.23,1,.32,1) both; }
.gate-content h1 { margin: 24px 0 18px; color: #5c3741; font: 700 clamp(43px, 5.2vw, 76px)/1.05 "Fraunces", Georgia, serif; letter-spacing: -.045em; }
.gate-content h1 em, .result-content h1 em { color: #c68d4d; font-style: italic; font-weight: 500; }
.lead { max-width: 385px; margin: 0; color: #806269; font-size: 15px; line-height: 1.85; }
.gate-content__panel { width: 470px; max-width: 100%; margin-top: 53px; padding: 23px 25px 19px; animation: fadeUp .55s .18s cubic-bezier(.23,1,.32,1) both; }
.panel-topline, .report-meta { display: flex; justify-content: space-between; align-items: center; color: #a27a75; font-size: 8px; letter-spacing: .16em; font-weight: 800; }
.panel-index { display: flex; justify-content: space-between; align-items: center; margin: -3px 0 17px; color: #b77b4e; font-size: 8px; letter-spacing: .18em; font-weight: 800; }.panel-index span:last-child { color: #ae8a87; }
.qr-row { display: flex; align-items: center; gap: 22px; padding: 23px 0 20px; border-bottom: 1px solid rgba(190,132,97,.22); }
.qr-code { position: relative; flex: 0 0 auto; width: 88px; height: 88px; overflow: hidden; background-color: #fff1e6; background-image: repeating-linear-gradient(45deg, #9f6870 0 3px, transparent 3px 7px), repeating-linear-gradient(90deg, transparent 0 9px, #9f6870 9px 12px, transparent 12px 18px); box-shadow: 0 0 0 5px rgba(201,148,75,.1); }
.qr-code__finder { position: absolute; z-index: 2; width: 23px; height: 23px; border: 5px solid #a56d72; background: #fff1e6; box-shadow: inset 0 0 0 4px #fff1e6; }
.qr-code__finder--tl { top: 6px; left: 6px; }.qr-code__finder--tr { top: 6px; right: 6px; }.qr-code__finder--bl { bottom: 6px; left: 6px; }
.qr-code__pixels { position: absolute; inset: 4px; background: radial-gradient(circle at 70% 27%, #a56d72 0 4%, transparent 4.8%), radial-gradient(circle at 54% 72%, #a56d72 0 4%, transparent 5%), radial-gradient(circle at 84% 82%, #a56d72 0 5%, transparent 6%), radial-gradient(circle at 32% 45%, #a56d72 0 4%, transparent 5%); mix-blend-mode: multiply; }
.qr-copy { display: flex; flex-direction: column; gap: 9px; }.qr-copy strong { color: #69444d; font: 600 17px/1.3 "Fraunces", Georgia, serif; }.qr-copy > span:last-child { color: #a3807b; font-size: 11px; }
.confirm-row { display: flex; align-items: flex-start; gap: 11px; padding: 17px 0 14px; }.confirm-check { display: grid; flex: 0 0 auto; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1px solid #c19a89; color: #fffaf5; background: transparent; transition: all .16s cubic-bezier(.23,1,.32,1); }.confirm-check.is-checked { border-color: #c9944b; background: #c9944b; transform: scale(1.05); }.confirm-row p { margin: 0; color: #99797a; font-size: 10px; line-height: 1.65; }.confirm-row strong { color: #714b53; font-weight: 800; }.confirm-row p span { color: #b08f8a; }
.primary-button, .secondary-button, .next-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.primary-button { width: 100%; min-height: 48px; color: #fffaf4; background: linear-gradient(110deg, #c98d4a, #d8a45d); box-shadow: 0 10px 18px rgba(196,137,70,.17); font-size: 12px; font-weight: 800; letter-spacing: .04em; }.primary-button:hover { background: linear-gradient(110deg, #d9a15b, #e1b36f); box-shadow: 0 13px 22px rgba(196,137,70,.23); }.primary-button:active, .secondary-button:active, .next-button:active, .answer-card:active { transform: scale(.97); }.primary-button:disabled { cursor: not-allowed; color: #b79891; background: #eedbd4; box-shadow: none; }
.panel-footnote { display: flex; justify-content: center; align-items: center; gap: 5px; padding-top: 13px; color: #ad8e88; font-size: 9px; }.panel-footnote svg { color: #bd8256; }
.journey-preview { display: flex; flex-direction: column; gap: 13px; width: 470px; max-width: 100%; margin-top: 21px; padding: 0 1px; }.journey-preview__title { color: #a7837d; font-size: 8px; letter-spacing: .2em; }.journey-preview__steps { display: flex; align-items: center; gap: 11px; color: #9b7776; font-size: 9px; }.journey-preview__steps span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }.journey-preview__steps b { color: #bc804d; font-size: 8px; letter-spacing: .08em; }.journey-preview__steps i { flex: 1; height: 1px; min-width: 15px; background: linear-gradient(90deg, rgba(197,144,75,.6), rgba(197,144,75,.12)); }.journey-preview__steps i::after { content: ""; display: block; width: 3px; height: 3px; margin: -1px 0 0 auto; background: #c9944b; transform: rotate(45deg); }
.gate-footer { position: absolute; bottom: 32px; left: 8%; right: 9%; z-index: 3; display: flex; justify-content: space-between; color: #a27e7d; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }.scroll-cue { display: inline-flex; align-items: center; gap: 9px; }.scroll-cue span { width: 29px; height: 1px; background: #c9944b; }.desktop-rail { position: fixed; z-index: 8; right: 32px; bottom: 32px; display: flex; align-items: center; gap: 13px; color: #a27e7d; font-size: 8px; letter-spacing: .18em; writing-mode: vertical-rl; }.desktop-rail:first-letter { color: #c9944b; }

.quiz-screen { padding-bottom: 7vh; background: radial-gradient(ellipse at 75% 18%, rgba(255,220,222,.45), transparent 40%); }.quiz-topbar, .result-topbar { display: flex; justify-content: space-between; align-items: center; width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0; border-bottom: 1px solid rgba(190,132,97,.22); }.icon-button { display: grid; place-items: center; width: 34px; height: 34px; color: #b77b4e; background: rgba(255,255,255,.55); border: 1px solid rgba(190,132,97,.4); cursor: pointer; transition: background .2s ease, transform .16s ease; }.icon-button:hover { background: #fff; }.icon-button:active { transform: scale(.96); }.topbar-counter { color: #b77b4e; font-size: 11px; letter-spacing: .13em; font-weight: 800; }.topbar-counter i { padding: 0 6px; color: #bd9d97; font-style: normal; font-weight: 400; }
.quiz-content { padding-top: 73px; }.quiz-heading { max-width: 710px; margin-left: 11%; }.quiz-heading h2 { margin: 21px 0 12px; color: #603b46; font: 600 clamp(28px, 3.4vw, 47px)/1.18 "Fraunces", Georgia, serif; letter-spacing: -.035em; }.quiz-heading p { margin: 0; color: #927276; font-size: 13px; line-height: 1.7; }
.quiz-stage { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(390px, 1fr); gap: clamp(45px, 8vw, 116px); margin: 53px 4% 0 11%; align-items: start; }.quiz-stage__visual { position: relative; min-height: 520px; padding: 25px 0 0 25px; border-left: 1px solid rgba(190,132,97,.42); border-top: 1px solid rgba(190,132,97,.27); background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,220,220,.17)); }.quiz-stage__visual::before { content: ""; position: absolute; top: -1px; right: 14%; width: 90px; height: 1px; background: #d5a05a; }.quiz-stage__visual::after { content: ""; position: absolute; top: -1px; left: -1px; width: 60px; height: 1px; background: #c9944b; }.visual-index { color: #aa8580; font-size: 9px; letter-spacing: .22em; }.visual-caption { position: absolute; left: 25px; bottom: 22px; display: flex; flex-direction: column; gap: 7px; }.visual-caption span { color: #b77b4e; font-size: 8px; letter-spacing: .18em; }.visual-caption strong { color: #6f4852; font: 600 19px "Fraunces", Georgia, serif; }.visual-caption small { color: #a47f7e; font-size: 9px; }
.gemstone-visual { position: relative; display: grid; place-items: center; width: 100%; height: 235px; }.gemstone-visual--large { height: 360px; }.gemstone-visual img { position: relative; z-index: 2; width: 65%; max-width: 230px; mix-blend-mode: multiply; filter: drop-shadow(0 22px 22px rgba(160,94,94,.22)); animation: gemDrift 5s ease-in-out infinite; }.gemstone-visual__halo { position: absolute; z-index: 1; width: 42%; aspect-ratio: 1; border-radius: 50%; opacity: .34; filter: blur(28px); animation: haloPulse 4s ease-in-out infinite; }.gemstone-visual--ruby .gemstone-visual__halo { background: #e99ca3; }.gemstone-visual--emerald .gemstone-visual__halo { background: #9bdbb0; }.gemstone-visual--sapphire .gemstone-visual__halo { background: #a9c6f2; }.gemstone-visual--honey .gemstone-visual__halo { background: #f0c27b; }
.gem-shape { position: relative; z-index: 2; display: block; width: 150px; height: 168px; background: linear-gradient(132deg, #f7b6c2 4%, #cc718d 22%, #fff0eb 34%, #e690a6 47%, #f6c4d0 58%, #b45d7d 80%); clip-path: polygon(50% 0, 88% 22%, 100% 62%, 68% 100%, 29% 92%, 0 59%, 13% 22%); filter: drop-shadow(18px 24px 13px rgba(160,94,94,.24)); animation: gemDrift 5s ease-in-out infinite; }.gem-shape::after { content: ""; position: absolute; inset: 13px; background: linear-gradient(145deg, transparent 0 34%, rgba(255,255,255,.72) 35% 39%, transparent 40% 68%, rgba(158,74,99,.24) 69%); clip-path: polygon(50% 0, 100% 28%, 74% 91%, 28% 100%, 0 33%); }.gemstone-visual--sapphire .gem-shape { background: linear-gradient(132deg, #cadcff 4%, #7599dc 21%, #fff8fd 36%, #92b4ee 50%, #c6dbfb 64%, #597cc0 87%); }.gemstone-visual--sapphire .gem-shape::after { background: linear-gradient(145deg, transparent 0 31%, rgba(255,255,255,.76) 32% 38%, transparent 39% 67%, rgba(68,104,172,.28) 68%); }.gemstone-visual--emerald .gem-shape { background: linear-gradient(132deg, #c2f1c9 4%, #67b98c 21%, #f2fff3 36%, #8bd2a2 50%, #c7efd0 64%, #4a9b76 87%); }.gemstone-visual--emerald .gem-shape::after { background: linear-gradient(145deg, transparent 0 31%, rgba(255,255,255,.75) 32% 38%, transparent 39% 67%, rgba(50,126,87,.25) 68%); }.gemstone-visual--large .gem-shape { width: 190px; height: 212px; }
.answers-column { padding-top: 3px; }.answers-label { display: flex; justify-content: space-between; padding-bottom: 11px; color: #a27d7b; border-bottom: 1px solid rgba(190,132,97,.22); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }.answers-label span:last-child { color: #b77b4e; }.answer-list { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }.answer-card { display: flex; align-items: center; gap: 14px; min-height: 57px; width: 100%; padding: 0 16px; color: #704b55; background: rgba(255,255,255,.7); border: 1px solid rgba(190,132,97,.27); text-align: left; cursor: pointer; transition: all .18s cubic-bezier(.23,1,.32,1); }.answer-card:hover:not(:disabled) { border-color: #c9944b; background: rgba(255,247,237,.95); transform: translateX(4px); box-shadow: 6px 10px 18px rgba(179,104,99,.1); }.answer-card__letter { display: grid; place-items: center; width: 24px; height: 24px; color: #b77b4e; border: 1px solid rgba(190,132,97,.55); font-size: 10px; font-weight: 800; }.answer-card > span:nth-child(2) { flex: 1; font-size: 12px; }.answer-card__mark { color: #b0837c; }.answer-card.is-correct { color: #397b55; border-color: rgba(76,154,103,.65); background: rgba(224,248,228,.86); }.answer-card.is-correct .answer-card__letter { color: #fff; border-color: #67b37f; background: #67b37f; }.answer-card.is-correct .answer-card__mark { color: #4d9f68; }.answer-card.is-wrong { color: #a6505a; border-color: rgba(211,113,119,.68); background: rgba(255,226,226,.82); }.answer-card.is-wrong .answer-card__letter { color: #fff; border-color: #d5787f; background: #d5787f; }.answer-card.is-wrong .answer-card__mark { color: #c65f68; }.answer-card.is-muted { opacity: .48; }
.ai-feedback { margin-top: 18px; padding: 17px 18px 16px; border-left: 2px solid #c9944b; background: rgba(255,239,220,.68); animation: fadeUp .28s cubic-bezier(.23,1,.32,1) both; }.ai-feedback--correct { border-left-color: #67b37f; background: rgba(224,248,228,.72); }.ai-feedback--wrong { border-left-color: #d5787f; background: rgba(255,226,226,.7); }.ai-feedback__heading { display: flex; align-items: center; gap: 10px; }.ai-spark { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: #c9944b; border-radius: 50%; }.ai-feedback--correct .ai-spark { background: #67b37f; }.ai-feedback--wrong .ai-spark { background: #d5787f; }.ai-feedback__heading div { display: flex; flex-direction: column; gap: 4px; }.ai-feedback__heading span { color: #a27b76; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }.ai-feedback__heading strong { color: #714a53; font: 600 17px "Fraunces", Georgia, serif; }.ai-feedback p { margin: 13px 0 10px; color: #8d696f; font-size: 11px; line-height: 1.7; }.ai-feedback__clue { color: #ae7445; font-size: 9px; line-height: 1.5; }.answer-hint { display: flex; gap: 6px; align-items: center; margin-top: 17px; color: #a7837f; font-size: 10px; }.answer-hint svg { color: #c9944b; }.next-button { width: 100%; min-height: 47px; margin-top: 19px; color: #fffaf4; background: linear-gradient(110deg, #c98d4a, #d8a45d); box-shadow: 0 10px 18px rgba(196,137,70,.15); font-size: 11px; font-weight: 800; letter-spacing: .04em; }.next-button:hover:not(:disabled) { background: linear-gradient(110deg, #d9a15b, #e1b36f); }.next-button:disabled { cursor: not-allowed; color: #b79891; background: #eedbd4; box-shadow: none; }.quiz-progress { position: fixed; z-index: 9; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(199,144,75,.18); }.quiz-progress span { display: block; height: 100%; background: #c9944b; transition: width .28s cubic-bezier(.23,1,.32,1); }

.result-screen { padding-bottom: 45px; background: radial-gradient(ellipse at 72% 30%, rgba(255,220,222,.6), transparent 34%), radial-gradient(ellipse at 28% 80%, rgba(255,237,207,.55), transparent 40%); }.result-topbar { border-color: rgba(190,132,97,.24); }.result-topbar__edition { color: #a27e7d; font-size: 8px; line-height: 1.55; letter-spacing: .18em; text-align: right; }.result-content { padding-top: 77px; }.result-intro { margin-left: 11%; }.result-intro h1 { margin: 23px 0 15px; color: #603b46; font: 600 clamp(36px, 4.3vw, 60px)/1.04 "Fraunces", Georgia, serif; letter-spacing: -.045em; }.result-intro p { max-width: 450px; margin: 0; color: #927276; font-size: 12px; line-height: 1.8; }.result-layout { display: grid; grid-template-columns: 240px minmax(0, 610px); gap: 68px; align-items: center; margin: 58px auto 0; width: min(920px, 100%); }.result-emblem { display: flex; flex-direction: column; align-items: center; gap: 18px; }.result-emblem__ring { display: grid; place-items: center; width: 188px; height: 188px; border: 1px solid rgba(199,144,75,.75); transform: rotate(45deg); background: linear-gradient(140deg, rgba(255,225,191,.58), rgba(255,247,237,.6) 57%); box-shadow: 0 0 0 13px rgba(199,144,75,.1), 0 0 65px rgba(212,144,88,.17); animation: emblemFloat 5s ease-in-out infinite; }.result-emblem__ring::before, .result-emblem__ring::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(199,144,75,.32); }.result-emblem__ring::after { inset: 46px; border-color: rgba(199,144,75,.6); }.result-emblem__ring span { transform: rotate(-45deg); color: #c28649; font: 500 74px "Fraunces", Georgia, serif; }.result-emblem__label { color: #b77b4e; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }.result-emblem--green .result-emblem__ring { border-color: #67b37f; box-shadow: 0 0 0 13px rgba(103,179,127,.1), 0 0 65px rgba(103,179,127,.15); }.result-emblem--green .result-emblem__ring span, .result-emblem--green .result-emblem__label { color: #4c9565; }.result-emblem--blue .result-emblem__ring { border-color: #7c9fdc; box-shadow: 0 0 0 13px rgba(124,159,220,.1), 0 0 65px rgba(124,159,220,.15); }.result-emblem--blue .result-emblem__ring span, .result-emblem--blue .result-emblem__label { color: #5f83c6; }
.result-report { padding: 24px 27px 23px; }.report-title { padding: 36px 0 28px; }.report-title > span { color: #b77b4e; font-size: 9px; letter-spacing: .18em; font-weight: 800; }.report-title h2 { margin: 12px 0 11px; color: #69434d; font: 600 29px "Fraunces", Georgia, serif; }.report-title p { max-width: 470px; margin: 0; color: #8d696f; font-size: 11px; line-height: 1.75; }.score-row { display: flex; align-items: end; gap: 16px; }.score-row > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 76px; }.score-row span { color: #9e7a78; font-size: 9px; }.score-row strong { color: #c28649; font: 600 38px/1 "Fraunces", Georgia, serif; }.score-row strong small { font-size: 17px; }.score-track { flex: 1; height: 3px; margin-bottom: 7px; background: rgba(199,144,75,.2); }.score-track span { display: block; height: 100%; background: #c9944b; }.score-range { padding-bottom: 4px; color: #b77b4e !important; white-space: nowrap; }.report-divider { height: 1px; margin: 24px 0 19px; background: rgba(190,132,97,.22); }.gift-row { display: flex; align-items: center; gap: 12px; }.gift-icon { display: grid; place-items: center; width: 39px; height: 39px; color: #fffaf4; background: #c9944b; }.gift-row > div:nth-child(2) { display: flex; flex-direction: column; gap: 5px; }.gift-row span { color: #9e7a78; font-size: 9px; }.gift-row strong { color: #6d4852; font: 600 15px "Fraunces", Georgia, serif; }.gift-row__ticket { margin-left: auto; color: #b77b4e; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: min(920px, 100%); margin: 62px auto 0; border-top: 1px solid rgba(190,132,97,.23); border-bottom: 1px solid rgba(190,132,97,.23); }.claim-note { display: flex; gap: 15px; min-height: 87px; padding: 21px 18px; }.claim-note + .claim-note { border-left: 1px solid rgba(190,132,97,.23); }.claim-note__number { color: #b77b4e; font-size: 10px; letter-spacing: .13em; }.claim-note p { margin: 0; color: #927276; font-size: 10px; line-height: 1.7; }.claim-note strong { color: #704b55; font-weight: 800; }.result-buttons { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(920px, 100%); margin: 29px auto 0; }.result-buttons .primary-button { width: auto; min-width: 205px; padding: 0 23px; }.secondary-button { min-height: 47px; padding: 0 19px; color: #9a7276; background: rgba(255,255,255,.62); border: 1px solid rgba(190,132,97,.42); font-size: 11px; font-weight: 800; }.secondary-button:hover { color: #704b55; border-color: #c9944b; background: #fff; }.result-footer { display: flex; justify-content: space-between; width: min(920px, 100%); margin: 49px auto 0; color: #a27e7d; font-size: 8px; letter-spacing: .16em; }.result-footer__social { display: flex; align-items: center; gap: 7px; }.result-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }.result-glow--one { top: 21%; left: 8%; background: #f2b9bd; }.result-glow--two { top: 48%; right: 3%; background: #f3cf8d; }
.icon-arrow { display: inline-block; font-size: 18px; line-height: .7; }.icon-check { font-size: 14px; font-weight: 800; }.icon-x { font-size: 18px; line-height: .7; }.icon-sparkle { font-size: 15px; }.icon-lock { font-size: 15px; }.icon-badge { font-size: 12px; }.icon-gift { font-size: 20px; }.icon-instagram { font-size: 16px; }

@keyframes heroEnter { from { opacity: 0; transform: scale(1.05); } to { opacity: .92; transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gemDrift { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes haloPulse { 0%, 100% { transform: scale(.94); opacity: .25; } 50% { transform: scale(1.08); opacity: .42; } }
@keyframes pearlDrift { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(-8px, -12px, 0) rotate(8deg); } }
@keyframes sparkleFloat { 0%, 100% { transform: translateY(0) rotate(0); opacity: .55; } 50% { transform: translateY(-10px) rotate(18deg); opacity: 1; } }
@keyframes emblemFloat { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

@media (max-width: 800px) {
  .screen-content, .quiz-topbar, .result-topbar { width: min(100% - 38px, 560px); }
  .progress-rail { position: absolute; top: 78px; right: 19px; left: 19px; flex-direction: row; justify-content: space-between; transform: none; writing-mode: horizontal-tb; font-size: 8px; }.progress-rail__item { writing-mode: horizontal-tb; }.progress-rail__item small { display: none; }.progress-rail__item:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: calc(100% + 8px); width: 42px; height: 1px; background: rgba(190,132,97,.27); }
  .gate-screen { min-height: auto; display: block; padding-bottom: 30px; }.gate-topbar { top: 18px; left: 19px; right: 19px; }.gate-topbar .brand { transform: scale(.88); transform-origin: left center; }.gate-topbar__pass { font-size: 7px; }.hero-art { position: relative; width: 100%; height: 54vh; min-height: 360px; }.hero-art::after { border-left: 0; background: linear-gradient(0deg, #fff8f5 0%, rgba(255,248,245,.1) 54%, rgba(255,240,237,.08) 100%); }.hero-art__label { top: 34%; right: 7%; }  .pearl-art { right: 3%; bottom: 17%; width: 34%; mask-image: radial-gradient(ellipse at center, #000 38%, transparent 76%); -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 76%); }.gate-content { display: block; min-height: auto; padding: 42px 0 0; }.gate-content__intro { max-width: 480px; }.gate-content h1 { margin-top: 21px; font-size: clamp(42px, 11vw, 60px); }.lead { font-size: 13px; }.gate-content__panel { margin-top: 33px; }.journey-preview { margin-top: 19px; }.journey-preview__steps { gap: 7px; font-size: 8px; }.journey-preview__steps i { min-width: 7px; }.gate-footer { position: relative; right: auto; bottom: auto; left: auto; width: min(100% - 38px, 560px); margin: 35px auto 0; }.desktop-rail { display: none; }
  .quiz-topbar, .result-topbar { padding: 21px 0; }.quiz-content, .result-content { padding-top: 46px; }.quiz-heading, .result-intro { margin-left: 0; }.quiz-heading h2 { font-size: clamp(29px, 8.5vw, 43px); }.quiz-stage { display: block; margin: 38px 0 0; }.quiz-stage__visual { min-height: 350px; padding-left: 18px; }.gemstone-visual--large { height: 260px; }.visual-caption { left: 18px; bottom: 17px; }.quiz-stage__visual .gemstone-visual img { max-width: 180px; }.gemstone-visual--large .gem-shape { width: 150px; height: 170px; }.answers-column { margin-top: 36px; }.result-layout { display: block; width: 100%; margin-top: 49px; }.result-emblem { margin-bottom: 57px; }.result-emblem__ring { width: 148px; height: 148px; }.result-emblem__ring span { font-size: 62px; }.result-report { padding: 21px 18px; }.result-actions { display: block; margin-top: 40px; }.claim-note + .claim-note { border-top: 1px solid rgba(190,132,97,.23); border-left: 0; }.result-buttons { flex-direction: column; align-items: stretch; width: 100%; }.result-buttons .primary-button, .result-buttons .secondary-button { width: 100%; }.result-footer { gap: 17px; margin-top: 39px; flex-direction: column; }.result-footer__social { align-self: flex-end; }
}

@media (max-width: 460px) {
  .screen-content, .quiz-topbar, .result-topbar { width: calc(100% - 30px); }.gate-content__panel { padding: 20px 17px 17px; }.qr-row { gap: 16px; }.qr-code { width: 76px; height: 76px; }.qr-copy strong { font-size: 15px; }.confirm-row p { font-size: 9px; }.hero-art { height: 47vh; min-height: 300px; }.gate-content h1 { font-size: 46px; }.quiz-heading h2 { font-size: 30px; }.quiz-stage__visual { min-height: 315px; }.ai-feedback__heading strong { font-size: 15px; }.report-title h2 { font-size: 25px; }.score-row { gap: 9px; }.score-row strong { font-size: 33px; }.score-range { font-size: 8px !important; }
}

/* Report-board extension: reference-image language, kept within the pink/gold brand system.
 * Material: sky-blue exhibition board + warm ivory cards + rose/coral accents + JMA champagne.
 * The result page is intentionally playful and infographic-led, while the quiz entry remains editorial.
 */
.report-board { min-height: 100vh; padding: 0 0 42px; overflow: hidden; background: linear-gradient(140deg, #a9d3ed 0%, #c9e7f5 47%, #f9d4d0 100%); color: #4b687d; }
.report-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; background-image: radial-gradient(circle at 14% 19%, rgba(255,255,255,.95) 0 2px, transparent 3px), radial-gradient(circle at 83% 12%, rgba(220,119,141,.55) 0 5px, transparent 6px), radial-gradient(circle at 61% 75%, rgba(255,255,255,.85) 0 2px, transparent 3px), linear-gradient(118deg, transparent 0 48%, rgba(255,255,255,.18) 49% 50%, transparent 51%); background-size: 240px 240px, 320px 320px, 190px 190px, 100% 100%; }
.report-topbar { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 16px; border-bottom: 1px solid rgba(97,137,164,.34); }.report-topbar__label { color: #5f87a1; font-size: 9px; letter-spacing: .16em; }.report-topbar__label b { margin-left: 14px; color: #d07870; font-weight: 800; }
.report-page { position: relative; z-index: 2; width: min(1120px, calc(100% - 48px)); margin: 40px auto 0; }.report-ribbon { position: relative; display: flex; justify-content: center; align-items: center; width: min(760px, 80%); min-height: 65px; margin: 0 auto 30px; color: #733f43; background: linear-gradient(180deg, #ffe3a7, #f7bf91); border: 3px solid #8b6670; border-radius: 19px 19px 13px 13px; box-shadow: 0 7px 0 rgba(117,145,162,.25), 0 15px 22px rgba(62,105,136,.13); }.report-ribbon::before { content: ""; position: absolute; inset: 7px 17px; border: 2px dashed rgba(139,102,112,.44); border-radius: 10px; }.report-ribbon__title { position: relative; z-index: 1; padding: 0 17px; font: 700 clamp(19px, 3vw, 31px)/1.2 "Fraunces", Georgia, serif; text-align: center; letter-spacing: .04em; }.report-ribbon__tail { position: absolute; z-index: -1; top: 9px; width: 47px; height: 47px; background: #efab75; border: 3px solid #8b6670; }.report-ribbon__tail--left { left: -36px; clip-path: polygon(0 0, 100% 19%, 81% 53%, 100% 100%, 0 85%, 21% 51%); }.report-ribbon__tail--right { right: -36px; transform: scaleX(-1); clip-path: polygon(0 0, 100% 19%, 81% 53%, 100% 100%, 0 85%, 21% 51%); }
.report-board__intro { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 0 6px; }.report-stamp { display: inline-flex; align-items: center; gap: 7px; color: #617e94; font-size: 10px; letter-spacing: .15em; font-weight: 800; }.report-score-chip { padding: 8px 13px; color: #6a5966; background: rgba(255,255,255,.57); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; font-size: 10px; }.report-score-chip b { color: #cf756c; font-size: 14px; margin-left: 6px; }
.report-grid { display: grid; grid-template-columns: .78fr 1.38fr 1fr; grid-template-rows: auto auto; grid-template-areas: "tutor radar style" "tutor radar advice"; gap: 16px; }.tutor-card, .report-card, .report-gift-strip { border: 3px solid #83a9c0; box-shadow: 0 8px 0 rgba(83,127,154,.16), 0 16px 25px rgba(70,118,150,.12); }.tutor-card { position: relative; display: flex; flex-direction: column; align-items: center; grid-area: tutor; min-height: 552px; overflow: hidden; padding: 18px 15px 17px; background: linear-gradient(180deg, rgba(236,249,255,.95), rgba(202,230,244,.92)); border-radius: 21px; }.tutor-card::before { content: "✦"; position: absolute; top: 17%; right: 13%; color: #edb65d; font-size: 23px; animation: reportTwinkle 2.6s ease-in-out infinite; }.tutor-card img { width: 94%; height: 305px; object-fit: contain; margin-top: 8px; filter: drop-shadow(0 10px 3px rgba(66,117,142,.16)); animation: reportTutorFloat 4.2s ease-in-out infinite; }.tutor-bubble { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; color: #fff7f2; background: #d87878; border: 2px solid #835e70; border-radius: 16px 16px 16px 5px; font-size: 11px; font-weight: 800; box-shadow: 0 4px 0 rgba(131,94,112,.19); }.tutor-speech { position: relative; width: 90%; margin-top: auto; padding: 13px 11px 11px; color: #53758b; background: #fff9ee; border: 2px solid #83a9c0; border-radius: 16px; font-size: 11px; line-height: 1.55; text-align: center; }.tutor-speech::before { content: ""; position: absolute; top: -14px; left: 21%; border-right: 12px solid transparent; border-bottom: 16px solid #83a9c0; }.tutor-speech::after { content: ""; position: absolute; top: -10px; left: calc(21% + 2px); border-right: 9px solid transparent; border-bottom: 12px solid #fff9ee; }.tutor-speech strong { color: #cc6f6f; font: 700 17px "Fraunces", Georgia, serif; }.tutor-sparkle { position: absolute; bottom: 28%; right: 12%; color: #dba256; font-size: 20px; animation: reportTwinkle 2.2s .4s ease-in-out infinite; }
.report-card { position: relative; overflow: hidden; padding: 17px 19px 15px; background: rgba(255,251,244,.95); border-radius: 19px; }.radar-card { grid-area: radar; min-height: 552px; }.style-card { grid-area: style; min-height: 264px; }.advice-card { grid-area: advice; min-height: 272px; }.report-card::after { content: ""; position: absolute; right: -25px; bottom: -46px; width: 118px; height: 118px; border: 2px solid rgba(221,164,95,.25); border-radius: 50%; }.report-card__heading { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px; }.report-card__heading h2 { margin: 0; color: #5c7180; font: 700 19px/1.18 "Fraunces", Georgia, serif; }.report-card__heading p { margin: 5px 0 0; color: #7d97a3; font-size: 10px; line-height: 1.5; }.report-number { display: grid; flex: 0 0 auto; place-items: center; width: 31px; height: 31px; margin-top: -3px; color: #fff9ef; background: #e47e79; border: 2px solid #8b6670; border-radius: 50%; font: 700 18px "Fraunces", Georgia, serif; box-shadow: 0 3px 0 rgba(139,102,112,.16); }
.radar-chart { position: relative; width: min(100%, 360px); height: 420px; margin: 4px auto 0; }.radar-chart svg { position: absolute; top: 60px; left: 50%; width: 264px; height: 264px; transform: translateX(-50%); overflow: visible; }.radar-grid polygon { fill: none; stroke: #92b4c7; stroke-width: 1.3; opacity: .7; }.radar-grid line { stroke: #a3bfd0; stroke-width: 1; opacity: .65; }.radar-area { fill: rgba(224,122,151,.48); stroke: #d96f8e; stroke-width: 2.6; stroke-linejoin: round; animation: radarReveal .85s cubic-bezier(.23,1,.32,1) both; }.radar-point { fill: #d96f8e; stroke: #fff9ef; stroke-width: 2; }.radar-labels { position: absolute; inset: 0; font-size: 10px; color: #6c8798; text-align: center; }.radar-label { position: absolute; display: flex; flex-direction: column; gap: 2px; min-width: 76px; }.radar-label b { color: #d46f72; font-size: 11px; }.radar-label--0 { top: 11px; left: 50%; transform: translateX(-50%); }.radar-label--1 { top: 119px; right: -4px; text-align: left; }.radar-label--2 { right: 3px; bottom: 38px; text-align: left; }.radar-label--3 { bottom: 39px; left: -5px; text-align: right; }.radar-label--4 { top: 119px; left: -4px; text-align: right; }.radar-chart::after { content: "✦"; position: absolute; right: 30px; bottom: 33px; color: #e1ae5b; font-size: 19px; animation: reportTwinkle 2.8s ease-in-out infinite; }
.style-gems { display: flex; align-items: center; justify-content: space-around; height: 106px; margin: 14px 10px 1px; }.mini-gem { position: relative; display: grid; place-items: center; width: 56px; height: 66px; clip-path: polygon(50% 0, 88% 19%, 100% 58%, 68% 100%, 29% 91%, 0 57%, 13% 20%); filter: drop-shadow(5px 8px 0 rgba(81,117,138,.16)); animation: miniGemFloat 4s ease-in-out infinite; }.mini-gem::after { content: ""; position: absolute; inset: 9px; clip-path: polygon(50% 0, 100% 31%, 73% 100%, 23% 91%, 0 28%); background: linear-gradient(135deg, rgba(255,255,255,.65), transparent 42%, rgba(255,255,255,.2) 43%); }.mini-gem--sapphire { background: linear-gradient(135deg, #87bcff, #3f70cf 55%, #7562cf); }.mini-gem--pearl { width: 54px; height: 54px; clip-path: none; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #fff 0 8%, #fff7e9 26%, #eccbbd 72%, #b98b8d 100%); animation-delay: -.8s; }.mini-gem--amethyst { background: linear-gradient(135deg, #f3a8ed, #a94cca 54%, #634bab); animation-delay: -1.5s; }.style-gem-labels { display: grid; grid-template-columns: repeat(3, 1fr); color: #5b7485; font-size: 9px; text-align: center; }.style-profile { display: flex; flex-direction: column; gap: 4px; margin-top: 13px; padding-top: 10px; border-top: 1px solid rgba(131,169,192,.35); }.style-profile strong { color: #d36e72; font: 700 15px "Fraunces", Georgia, serif; }.style-profile span { color: #7992a0; font-size: 9px; letter-spacing: .04em; }
.advice-list { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }.advice-item { display: flex; align-items: center; gap: 10px; }.advice-icon { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; color: #d67b77; background: #ffe6dd; border: 1px solid #f1b1a6; border-radius: 11px; }.advice-item strong { color: #5c7180; font-size: 10px; }.advice-item p { margin: 2px 0 0; color: #8096a1; font-size: 9px; line-height: 1.45; }
.report-gift-strip { display: grid; grid-template-columns: 110px 1fr minmax(210px, .8fr); align-items: center; gap: 14px; margin-top: 18px; padding: 9px 18px 9px 10px; background: linear-gradient(90deg, #ffd3c0, #fff0c8 55%, #fff8e9); border-radius: 18px; }.report-gift-art { height: 77px; overflow: hidden; text-align: center; }.report-gift-art img { width: 96px; height: 96px; object-fit: contain; margin-top: -8px; mix-blend-mode: multiply; animation: reportGiftFloat 3.5s ease-in-out infinite; }.report-gift-label { display: flex; flex-direction: column; gap: 3px; }.report-gift-label span, .report-gift-action > span { color: #b77b4e; font-size: 9px; letter-spacing: .16em; font-weight: 800; }.report-gift-label strong { color: #704b55; font: 700 20px "Fraunces", Georgia, serif; }.report-gift-label small { color: #8e7677; font-size: 9px; }.report-gift-action { display: flex; align-items: flex-end; flex-direction: column; gap: 8px; }.report-gift-action .primary-button { width: auto; min-height: 39px; padding: 0 16px; font-size: 10px; }.report-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: min(1120px, calc(100% - 48px)); margin: 23px auto 0; color: #5e8097; font-size: 8px; letter-spacing: .14em; }.report-footer .secondary-button { min-height: 34px; padding: 0 13px; color: #5e8097; background: rgba(255,255,255,.52); border-color: rgba(93,128,151,.45); font-size: 9px; }
@keyframes reportTutorFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes reportGiftFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes miniGemFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes reportTwinkle { 0%, 100% { opacity: .45; transform: scale(.9) rotate(-8deg); } 50% { opacity: 1; transform: scale(1.16) rotate(12deg); } }
@keyframes radarReveal { from { opacity: 0; transform: scale(.82); transform-origin: center; } to { opacity: 1; transform: scale(1); transform-origin: center; } }
@media (max-width: 800px) {
  .report-board { padding-bottom: 25px; }.report-topbar, .report-footer { width: calc(100% - 30px); }.report-topbar { padding-top: 17px; }.report-topbar__label { font-size: 7px; }.report-page { width: calc(100% - 30px); margin-top: 30px; }.report-ribbon { width: 96%; min-height: 57px; margin-bottom: 22px; }.report-ribbon__title { font-size: 20px; }.report-ribbon__tail { width: 35px; height: 37px; }.report-ribbon__tail--left { left: -24px; }.report-ribbon__tail--right { right: -24px; }.report-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "tutor tutor" "radar style" "advice advice"; gap: 11px; }.tutor-card { display: grid; grid-template-columns: 1fr 1.08fr; grid-template-rows: auto 1fr; min-height: 264px; padding: 12px 14px; }.tutor-bubble { grid-column: 1 / -1; align-self: start; width: max-content; }.tutor-card img { grid-column: 1; grid-row: 2; width: 100%; height: 190px; margin: -4px 0 0; }.tutor-speech { grid-column: 2; grid-row: 2; align-self: center; width: 100%; margin: 0; }.tutor-sparkle { bottom: 16%; right: 47%; }.radar-card { min-height: 420px; padding: 14px 10px; }.style-card, .advice-card { min-height: 240px; padding: 14px 13px; }.report-card__heading h2 { font-size: 16px; }.report-card__heading p { font-size: 9px; }.radar-chart { height: 307px; }.radar-chart svg { top: 34px; width: 210px; height: 210px; }.radar-label { min-width: 54px; font-size: 8px; }.radar-label b { font-size: 9px; }.radar-label--1, .radar-label--4 { top: 90px; }.radar-label--2, .radar-label--3 { bottom: 32px; }.radar-chart::after { right: 10px; bottom: 20px; }.style-gems { height: 78px; margin-top: 10px; }.mini-gem { width: 39px; height: 48px; }.mini-gem--pearl { width: 42px; height: 42px; }.style-gem-labels { font-size: 7px; }.style-profile { margin-top: 9px; }.style-profile strong { font-size: 13px; }.style-profile span { font-size: 7px; line-height: 1.35; }.advice-list { gap: 7px; }.advice-item strong { font-size: 9px; }.advice-item p { font-size: 8px; }.advice-icon { width: 31px; height: 31px; }.report-gift-strip { grid-template-columns: 74px 1fr; gap: 9px; padding-right: 10px; }.report-gift-art { height: 68px; }.report-gift-art img { width: 78px; height: 78px; }.report-gift-label strong { font-size: 16px; }.report-gift-action { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }.report-gift-action .primary-button { min-height: 41px; }.report-footer { gap: 12px; flex-wrap: wrap; font-size: 7px; }.report-footer .secondary-button { order: 3; width: 100%; }
}
@media (max-width: 460px) { .report-board__intro { align-items: flex-start; gap: 10px; flex-direction: column; }.report-score-chip { align-self: flex-end; margin-top: -28px; }.report-ribbon__title { font-size: 17px; }.report-grid { grid-template-columns: 1fr; grid-template-areas: "tutor" "radar" "style" "advice"; }.tutor-card { min-height: 240px; }.radar-card { min-height: 383px; }.style-card, .advice-card { min-height: 210px; }.report-gift-strip { margin-top: 12px; }.report-footer { justify-content: center; text-align: center; }.report-footer > span:first-child { width: 100%; } }

.report-sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }.report-sparkles span { position: absolute; color: #e6b45c; font-family: Georgia, serif; text-shadow: 0 0 9px rgba(255,255,255,.62); animation: reportTwinkle 2.8s ease-in-out infinite; }.report-sparkles span:nth-child(1) { top: 15%; left: 6%; font-size: 20px; }.report-sparkles span:nth-child(2) { top: 24%; right: 10%; font-size: 28px; animation-delay: -.9s; }.report-sparkles span:nth-child(3) { bottom: 19%; left: 14%; font-size: 16px; animation-delay: -1.6s; }.report-sparkles span:nth-child(4) { right: 6%; bottom: 15%; font-size: 33px; color: #dc8a9b; animation-delay: -2.2s; }