.skip-link:not(:focus) { clip-path: inset(50%); }
.skip-link:focus { background: var(--primary); color: var(--on-primary); }
.showcase-section { border-top: 1px solid var(--line); }
.showcase-heading { margin-bottom: 54px; }
.showcase-heading h2 { margin-bottom: 20px; }
.showcase-heading > p:last-child { margin: 0; font-size: 13px; line-height: 2; color: var(--muted); }
.personality-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9%; align-items: start; }
.personality-chart { min-width: 0; }
.radar-surface { position: relative; max-width: 480px; margin: 0 auto; }
.radar-surface > svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar-ring { fill: var(--primary); fill-opacity: .012; stroke: var(--accent); stroke-opacity: .25; stroke-width: 1; }
.radar-axis { stroke: var(--accent); stroke-opacity: .2; stroke-width: 1; }
.radar-axis.is-selected { stroke: var(--primary); stroke-opacity: .65; }
.radar-values { fill: var(--primary); fill-opacity: .18; stroke: var(--primary); stroke-width: 1.8; }
.radar-value-point { fill: var(--accent); stroke: var(--paper); stroke-width: 1.5; }
.trait-label { position: absolute; transform: translate(-50%, -50%); border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); font-family: inherit; font-size: 11px; line-height: 1.8; padding: 9px 3px; min-height: 44px; min-width: 76px; cursor: pointer; white-space: nowrap; }
.trait-label > span { margin-right: 6px; color: var(--soft); font: 9px Arial, sans-serif; }
.trait-label[aria-pressed=true] { color: var(--ink); border-bottom-color: var(--accent); }
.trait-label[data-trait=extraversion] { top: 8%; left: 50%; }
.trait-label[data-trait=neuroticism] { top: 36%; left: 84%; }
.trait-label[data-trait=openness] { top: 85%; left: 71%; }
.trait-label[data-trait=agreeableness] { top: 85%; left: 29%; }
.trait-label[data-trait=conscientiousness] { top: 36%; left: 16%; }
.personality-pending { position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); padding: 10px 12px; background: var(--paper); color: var(--muted); font-size: 11px; white-space: nowrap; text-align: center; line-height: 1.9; }
.personality-pending small { display: block; color: var(--soft); font: 8px/1.8 Arial, sans-serif; letter-spacing: .14em; }
.personality-pending[hidden] { display: none; }
.trait-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 25px; text-align: center; }
.trait-values[hidden] { display: none; }
.trait-values dt { color: var(--muted); font-size: 9px; line-height: 1.8; }
.trait-values dd { margin: 8px 0 0; color: var(--accent); font: 18px/1.5 Arial, sans-serif; }
.trait-detail { min-height: 155px; border-top: 1px solid var(--line); padding-top: 23px; }
.trait-detail-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 13px; }
.trait-detail h3 { font-size: 12px; font-weight: 500; margin: 0; letter-spacing: .04em; }
#trait-value { color: var(--soft); font-size: 10px; }
.trait-detail > p { color: var(--muted); font-size: 11px; line-height: 2; margin: 0; }
.trait-hint { color: var(--soft); font-size: 10px; line-height: 1.9; margin: 20px 0 0; }
.personality-editorial { padding-top: 15px; }
.concept-note { color: var(--soft); font-size: 10px; line-height: 2; margin: 0 0 30px; }
.quality { padding: 0 0 27px; margin: 0 0 28px; border-bottom: 1px solid var(--line); }
.quality:last-of-type { margin-bottom: 20px; }
.quality > span { color: var(--accent); font: 8px Arial, sans-serif; letter-spacing: .18em; }
.quality h3 { font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif; font-size: 19px; font-weight: 500; line-height: 1.9; letter-spacing: .04em; margin: 15px 0 11px; }
.quality p { color: var(--muted); font-size: 12px; line-height: 2.2; margin: 0; }
.companion-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12%; }
.companion-intro .eyebrow { margin-bottom: 24px; }
.companion-intro h2 { margin-bottom: 25px; }
.companion-intro > .body-copy { margin-bottom: 30px; }
.companion-notice { padding-top: 23px; border-top: 1px solid var(--line); color: var(--soft); font-size: 11px; line-height: 2.1; }
.companion-facets { margin: 0; }
.companion-facet { padding: 0 0 27px; margin-bottom: 27px; border-bottom: 1px solid var(--line); }
.companion-facet:last-child { margin-bottom: 0; }
.companion-facet dt { color: var(--accent); font-size: 10px; letter-spacing: .08em; }
.companion-facet dd { margin: 13px 0 0; }
.companion-facet h3 { font-size: 15px; font-weight: 500; line-height: 1.9; margin: 0 0 10px; }
.companion-facet p { color: var(--muted); font-size: 12px; line-height: 2.1; margin: 0; }
.welcome-section { background: var(--footer); border-top: 1px solid var(--line); }
.welcome-inner { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 10%; align-items: center; }
.welcome-copy h2 { margin-bottom: 25px; }
.welcome-copy > .body-copy { font-size: 13px; max-width: 560px; }
.welcome-portrait { margin: 0; text-align: center; }
.welcome-portrait svg { display: block; width: 166px; height: 210px; margin: 0 auto; border-radius: 100px 100px 8px 8px; background: var(--surface); }
.welcome-portrait figcaption { display: block; padding-top: 20px; font-size: 9px; line-height: 2; letter-spacing: .08em; color: var(--muted); }
.welcome-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 25px; padding-top: 38px; margin-top: 38px; border-top: 1px solid var(--line); }
.unavailable-control { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.unavailable-control button { border: 1px solid var(--line); padding: 12px 23px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; min-height: 44px; cursor: default; }
.unavailable-control:first-child button { background: var(--primary-soft); color: var(--blue); }
.preparing-label { border: 1px solid var(--line); border-radius: 3px; color: var(--soft); padding: 3px 7px; font-size: 9px; white-space: nowrap; }
.welcome-note { grid-column: 1 / -1; color: var(--muted); font-size: 11px; line-height: 2.1; margin: 22px 0 0; max-width: 720px; }
.welcome-portal { grid-column: 1 / -1; margin-top: 28px; }
.welcome-portal .text-link { margin-top: 0; }
.footer-portal { display: inline-flex; gap: 15px; padding: 7px 0; margin-top: 10px; color: var(--accent); font-size: 10px; }
@media (max-width: 1000px) { .personality-layout { gap: 6%; } .companion-layout { gap: 8%; } .quality h3 { font-size: 17px; } }
@media (max-width: 760px) {
  .showcase-heading { margin-bottom: 35px; }
  .showcase-heading > p:last-child { font-size: 12px; }
  .personality-layout, .companion-layout { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .personality-chart { max-width: 480px; width: 100%; margin: 0 auto; }
  .trait-label { font-size: 10px; min-width: 68px; }
  .trait-label > span { font-size: 8px; margin-right: 4px; }
  .personality-pending { font-size: 10px; padding: 7px 8px; }
  .trait-detail { min-height: 148px; padding-top: 20px; }
  .trait-detail-heading { gap: 8px; }
  .personality-editorial { padding-top: 0; }
  .quality h3 { font-size: 19px; }
  .companion-intro .body-copy { margin-bottom: 24px; }
  .welcome-inner { grid-template-columns: minmax(0, 1fr); }
  .welcome-portrait { grid-row: 2; margin-top: 35px; }
  .welcome-portrait svg { width: 132px; height: 175px; }
  .welcome-actions { align-items: flex-start; flex-direction: column; gap: 19px; margin-top: 30px; padding-top: 27px; }
  .unavailable-control button { padding: 12px 17px; }
  .welcome-note { font-size: 10px; }
}