.prototype-switcher { position: fixed; z-index: 20; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(251,253,254,.22); border-radius: 10px; background: rgba(24,42,53,.9); box-shadow: 0 12px 35px rgba(24,42,53,.18); backdrop-filter: blur(12px); }
.prototype-switcher button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; color: #bfccd3; background: transparent; cursor: pointer; font-size: 10px; letter-spacing: .06em; }
.prototype-switcher button[aria-pressed="true"] { color: var(--color-ink); background: var(--color-paper-light); }

/* B1 — unchanged structure, sharing the same gutter and typography baseline. */
.test-page { flex-direction: column; padding-top: 24px; padding-bottom: 24px; }
.progress-track { margin-top: 18px; }
.progress-fill { width: 4.545%; height: 100%; background: var(--color-ink); }
.test-notice { margin: 12px 0 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.6; }
.question-stage { flex: 1; padding-top: clamp(54px, 11vh, 100px); }
.question-number { margin: 0 0 22px; color: var(--color-text-muted); font: 12px var(--font-serif); letter-spacing: .12em; }
.question-title { min-height: 100px; margin: 0 0 42px; font: 400 24px/1.65 var(--font-serif); letter-spacing: .025em; }
.options { border-top: 1px solid var(--color-hairline); }
.option-button { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; width: 100%; min-height: 62px; padding: 18px 4px; border: 0; border-bottom: 1px solid var(--color-hairline); background: transparent; cursor: pointer; text-align: left; line-height: 1.65; transition: padding 180ms ease, color 180ms ease, background 180ms ease; }
.option-button span:first-child { color: var(--color-option-index); font: 12px/1.9 var(--font-serif); }
.option-button:hover { padding-left: 10px; color: var(--color-accent-deep); background: var(--color-option-hover); }
.option-button.selected { padding-right: 14px; padding-left: 14px; color: var(--color-paper-light); border-color: var(--color-accent-deep); background: var(--color-accent-deep); }
.option-button.selected span:first-child { color: var(--color-selected-index); }
.selection-note { min-height: 22px; margin: 14px 0 0; color: var(--color-text-muted); font-size: 12px; }
.test-footer { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }

/* B2 — Love Final reading skeleton × Career Edition. */
.result-page { --personality: var(--color-type-01); flex-direction: column; background: var(--color-paper-light); }
.result-page section { width: 100%; }
.result-hero { padding-top: 28px; padding-bottom: 92px; background: var(--color-paper-light); }
.result-top { margin-bottom: 36px; }
.personality-portrait { width: 100%; margin: 0; }
.visual-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-powder); isolation: isolate; }
.career-visual { background: var(--color-visual-field); }
.paper-grain { position: absolute; z-index: 10; inset: 0; opacity: .22; pointer-events: none; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.shape { position: absolute; display: block; }
.shape-disc { width: 82%; aspect-ratio: 1; top: -19%; right: -31%; border-radius: 50%; background: var(--color-visual-disc); }
.shape-rail { width: 26%; height: 116%; top: -8%; left: 14%; background: var(--color-visual-rail); transform: rotate(-8deg); }
.shape-arc { width: 72%; aspect-ratio: 1; left: 27%; top: 28%; border: 54px solid var(--color-visual-arc); border-left-color: transparent; border-radius: 50%; transform: rotate(28deg); }
.shape-wedge { width: 63%; height: 38%; left: -13%; bottom: 8%; background: var(--color-visual-wedge); clip-path: polygon(0 28%, 100% 0, 77% 100%, 0 82%); }
.shape-block { width: 44%; height: 31%; right: -9%; bottom: -4%; background: var(--color-visual-block); transform: rotate(-6deg); }
.visual-index { position: absolute; z-index: 4; top: 22px; left: 22px; color: var(--color-ink); font: 68px/1 var(--font-serif); opacity: .34; }
.visual-caption { display: none; }
.result-identity { padding-top: 38px; }
.result-identity h1 { margin: 10px 0 16px; overflow-wrap: anywhere; }
.result-tagline { margin: 0; font: 400 18px/1.75 var(--font-serif); }
.short-description { margin: 24px 0 0; }
.trait-row { margin-top: 24px; }
.hero-action { display: grid; justify-items: center; gap: 12px; margin-top: 42px; }
.hero-action span { color: var(--color-text-muted); font-size: 10px; }

/* Result explanation — one quiet editorial pause. */
.type-explanation { padding-top: 92px; padding-bottom: 96px; background: var(--color-paper); }
.statement { margin: 0 0 46px; font: 400 27px/1.75 var(--font-serif); letter-spacing: .015em; }
.statement-note { margin: 0; padding-top: 22px; border-top: 1px solid var(--color-hairline); color: var(--color-text-muted); font-size: 13px; line-height: 1.9; }

/* Shared section system. */
.radar-feature, .dimension-feature, .values-feature, .state-feature, .integrated-feature, .closing-feature { padding-top: var(--section-space-start); padding-bottom: var(--section-space-end); }
.radar-feature, .values-feature, .integrated-feature, .closing-feature { background: var(--color-paper-light); }
.dimension-feature, .state-feature { background: var(--color-paper); }
.state-feature { background: var(--color-mist); }
.feature-deck { margin: 0 0 48px; }
.chart-note { margin: 28px 0 0; text-align: center; }

/* Section 01 — stable radar module. */
.radar-stage { position: relative; width: 100%; aspect-ratio: 1 / 1.06; margin: 10px auto 0; }
.radar-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-grid polygon, .radar-grid line { fill: none; stroke: var(--color-hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar-shape { fill: var(--color-chart-fill); stroke: var(--color-accent-deep); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.radar-points circle { fill: var(--color-accent-deep); stroke: var(--color-paper-light); stroke-width: 3; }
.radar-label { position: absolute; color: var(--color-ink); font: 11px/1.5 var(--font-serif); letter-spacing: .02em; }
.label-a1 { top: 0; left: 50%; transform: translateX(-50%); text-align: center; }
.label-a2 { top: 25%; right: 0; }
.label-a3 { right: 0; bottom: 22%; }
.label-a4 { bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; }
.label-a5 { bottom: 22%; left: 0; }
.label-a6 { top: 25%; left: 0; }

/* Section 02 — one continuous dimension reading list. */
.dimension-index { margin-top: 6px; }
.dimension-index article { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 27px 0; border-top: 1px solid var(--color-hairline); }
.dimension-index article:last-child { border-bottom: 1px solid var(--color-hairline); }
.dimension-index article > span { padding-top: 4px; color: var(--color-type-01); font: 11px/1.6 var(--font-serif); }
.dimension-index h3 { margin: 0 0 9px; font: 400 18px/1.4 var(--font-serif); }
.dimension-index p { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.8; }
.dimension-index small { display: block; margin-top: 8px; color: var(--color-text-muted); font-size: 11px; line-height: 1.7; }
.editorial-aside { margin-top: 56px; padding: 26px 0; border-block: 1px solid var(--color-hairline); }
.editorial-aside h3, .value-emphasis h3, .reflection-rule h3 { margin: 0 0 12px; font: 400 17px/1.5 var(--font-serif); }
.editorial-aside p, .value-emphasis p, .reflection-rule p { margin: 0; color: var(--color-text-muted); font-size: 12px; line-height: 1.9; }

/* Section 03 — repeated metric template, no card or item dividers. */
.value-ranking { margin: 0; padding: 0; list-style: none; }
.value-ranking li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 0 0 38px; }
.value-ranking .rank { padding-top: 4px; color: var(--color-type-01); font: 10px/1.5 var(--font-serif); }
.value-ranking h3, .state-lines h3 { margin: 0; }
.value-ranking i { display: block; position: relative; width: 100%; height: 1px; margin: 14px 0 11px; background: var(--color-hairline); }
.value-ranking i::after { content: ""; display: block; width: var(--value); height: 1px; background: var(--color-accent-deep); }
.value-ranking p { margin: 0; color: var(--color-text-muted); font-size: 11px; line-height: 1.7; }
.value-emphasis { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--color-hairline); }

/* Section 04 — same metric rhythm, lighter current-state voice. */
.state-lines article { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 0 0 38px; }
.state-lines article > p { margin: 3px 0 0; color: var(--color-type-01); font: 11px var(--font-serif); }
.state-lines div > span { display: block; height: 1px; margin: 14px 0 11px; background: var(--color-state-track); }
.state-lines div > span i { display: block; position: relative; width: var(--state); height: 1px; background: var(--color-accent-deep); }
.state-lines div > span i::after { content: ""; position: absolute; top: -4px; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent-deep); }
.state-lines small { display: block; color: var(--color-text-muted); font-size: 11px; line-height: 1.7; }
.stable-current-rule { margin: 16px 0 0; padding-top: 24px; border-top: 1px solid var(--color-hairline); color: var(--color-text-muted); font-size: 11px; line-height: 1.9; }
.stable-current-rule b { color: var(--color-accent-deep); font-weight: 600; }

/* Section 05 — slow long-form closure. */
.pull-quote { margin: 0 0 42px; padding-bottom: 34px; border-bottom: 1px solid var(--color-hairline); font: 400 21px/1.8 var(--font-serif); }
.integrated-copy p { line-height: 2.05; }
.reflection-rule { margin-top: 54px; padding: 26px 0; border-block: 1px solid var(--color-hairline); }

/* Section 06 — natural save/share ending. */
.closing-feature { padding-bottom: 82px; }
.closing-copy { margin: 0; }
.result-actions { display: grid; gap: 10px; margin-top: 46px; }
.result-actions .button--secondary, .closing-feature .button--text { width: 100%; }
.result-note { margin: 28px 0 0; line-height: 1.75; text-align: center; }
.brand-slot { height: 92px; margin-top: 42px; }
@media (max-width: 390px) {
  .prototype-switcher { right: 8px; bottom: 8px; }
  .prototype-switcher button { padding-inline: 9px; }
  .question-stage { padding-top: 44px; }
  .question-title { margin-bottom: 28px; }
  .statement { font-size: 24px; }
}