/* Scoped color details only. Layout, overlays, controls and binary choices come from common/test.css. */
.color-page{--accent:#b9a4ed}
.color-page [hidden]{display:none!important}
.color-page #start{height:auto;min-height:590px}
.color-page #start .common-subtitle{font-size:16px;line-height:1.7;margin-bottom:18px!important}
.color-page #start .callout{height:auto;min-height:0;display:block;flex:none;line-height:1.85;font-size:15px;padding:19px;margin:24px 0 18px!important;white-space:pre-line}
.color-page #start .test-stats{flex:none}
.color-page #start .small{height:auto;min-height:20px}
.color-page #start .btn{min-height:74px}
.color-page #start .stat-icon-img.life{filter:brightness(0) saturate(100%) invert(75%) sepia(28%) saturate(645%) hue-rotate(214deg)!important}
.color-page .quiz-nav{display:flex;justify-content:space-between}
.color-page .analysis-fill{width:100%}
.color-page button:focus-visible,.color-page a:focus-visible,.color-page summary:focus-visible,.color-page input:focus-visible{outline:3px solid #d9c9ff;outline-offset:4px}
.color-page .result-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#bdb5c6;font-size:11px;letter-spacing:1px}
.color-page .result-card{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center;margin:26px 0 20px;padding:22px;border:1px solid #48404f;border-radius:18px;background:linear-gradient(130deg,#201c28,#14151d);border-left:7px solid var(--color)}
.color-page #result h1{margin:8px 0;font-size:32px;color:#faf7fc;line-height:1.35}
.color-page .kicker{color:#c8bed5;font-size:13px;margin:0}
.color-page .result-tag{color:#e0d9e9;font-size:16px;line-height:1.7}
.color-page .tags{display:flex;gap:7px;flex-wrap:wrap}.color-page .tags span{border:1px solid #51465d;border-radius:99px;padding:5px 9px;font-size:12px;color:#ddd4e9}
.color-page .color-code{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;font-size:11px;letter-spacing:1px;color:#c2b5ce}
.color-page .object-art{color:var(--color);background:var(--pale);border-radius:18px;padding:10px}.color-page .object-art svg{display:block;width:100%;height:auto}
.color-page .result-intro{font-size:16px;line-height:1.9;color:#ded8e2}
.color-page .detail-grid article,.color-page .object-section,.color-page .palette-section{border-top:1px solid #342e3c;margin-top:28px;padding-top:24px}
.color-page .section-label{color:#b8a3d5;font-size:11px;letter-spacing:1px}.color-page .result-body h2{font-size:22px;margin:10px 0 14px;color:#f1ebf5}
.color-page .result-body p{line-height:1.9;color:#d1cbd6}.color-page .result-body .micro,.color-page .result-body .disclaimer{font-size:12px;color:#a9a1b0}
.color-page .scene{padding:18px;border:1px solid #3b3443;border-radius:14px;background:#19161e}.color-page .scene span{display:block;font-size:12px;color:#b7a6c8;margin-bottom:8px}.color-page .scene strong{font-size:16px}
.color-page .pair-palette{display:flex;overflow:hidden;border:1px solid #57505c;border-radius:12px;margin-top:20px}.color-page .pair-palette span{height:70px;flex:1}
.color-page details{border:1px solid #3c3545;border-radius:14px;padding:17px;margin-top:24px;font-size:13px;color:#d2c8dd}.color-page summary{cursor:pointer;font-weight:700}
.color-page #shareFallback{padding:16px;border:1px solid #514660;border-radius:12px;font-size:13px}.color-page #shareLink{box-sizing:border-box;display:block;width:100%;margin-top:10px;padding:10px;color:#f1eafa;background:#131019;border:1px solid #675875;border-radius:8px}
.color-page .more-link{display:block;text-align:center;margin-top:24px;color:#d4c0ef;font-size:14px}
@media(max-width:600px){.color-page #start{padding:28px 20px 22px}.color-page #start h1{font-size:29px;line-height:1.3}.color-page #start .common-subtitle{font-size:15px}.color-page #start .callout{padding:17px;margin-top:18px!important}.color-page .result-card{grid-template-columns:1fr 95px;padding:16px;gap:8px}.color-page #result h1{font-size:27px}.color-page .result-tag{font-size:14px}}
@media(max-width:360px){.color-page .result-card{grid-template-columns:1fr}.color-page .object-art{width:110px;justify-self:center}.color-page #quiz h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.color-page .orbit{animation:none}.color-page *{scroll-behavior:auto!important}}
/* Headings receive programmatic focus for screen-reader announcements, not a control ring.
   Keyboard-visible outlines remain on buttons, links, summary and inputs above. */
.color-page #question:focus,.color-page #colorName:focus{outline:none}
/* Shared result sequence: color, everyday palette, object, personality, personal note. */
.color-page .color-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px}
.color-page .color-heading .color-code{margin-top:10px}
.color-page .color-swatch{width:102px;aspect-ratio:1;flex:0 0 102px;background:var(--color);border-radius:12px;border:1px solid #ffffff50;box-shadow:inset 0 0 0 5px #ffffff0a}
.color-page .object-section>.object-art{width:min(260px,100%);padding:16px;margin:0 auto 24px}
.color-page .detail-section{border-top:1px solid #342e3c;margin-top:28px;padding-top:24px}
.color-page .rich-copy{white-space:pre-line;line-height:1.95}
.color-page .analysis-fill{width:0;transition:width 2.8s linear}
.color-page #imageShareFallback{margin-top:20px;border:1px solid #43374e;padding:16px;border-radius:14px}
.color-page #sharePreview{display:block;width:min(340px,100%);height:auto;margin:0 auto 16px;border-radius:14px}
.color-page #saveImage{display:block;text-align:center;text-decoration:none;font-size:14px}
.color-page .more-link{text-decoration:none;font-size:14px}
@media(max-width:360px){.color-page .color-swatch{width:76px;flex-basis:76px}.color-page .color-heading{gap:12px}}