/* StylistDesign tokens from the native app; this sheet affects version 04 only. */
.spectrum {
  --bg: #fffbfa;
  --ink: #292127;
  --muted: #81777d;
  --accent: #ff617a;
  --line: #ede3e5;
  --surface: #fff;
  --soft: #fff0f2;
}
.spectrum h1 em { color: #a64c65; }
.spectrum .hero-intro > p { color: #6d6268; }
.spectrum .result-card {
  --portrait-size: clamp(130px, 17vw, 210px);
  display: block;
  height: auto;
  background: radial-gradient(ellipse at 0 0, #ffe5ed 0, transparent 65%), #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 8px 28px #4a263405;
}
.spectrum .spectrum-pair { display: grid; grid-template-columns: var(--portrait-size) minmax(0, 1fr); align-items: center; gap: 22px; flex: none; }
.spectrum .color-halo {
  background: conic-gradient(#f25a8d 0deg 45deg, #9c1f50 45deg 90deg, #7f3c7d 90deg 135deg, #4e1c60 135deg 180deg, #17a59d 180deg 225deg, #3ab3d1 225deg 270deg, #3c55a5 270deg 315deg, #003a6e 315deg 360deg);
  position: relative;
  padding: 0;
  width: var(--portrait-size);
  height: var(--portrait-size);
  aspect-ratio: auto;
  justify-self: start;
  max-width: none;
  max-height: none;
}
.spectrum .color-halo .face-photo { position: absolute; inset: 10px; height: auto; width: auto; aspect-ratio: auto; border-color: #fff; background: #f4f3ef; }
.spectrum .face-photo img { width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 50% 38%; }
.spectrum .face-photo .mesh { opacity: .88; }
.spectrum .season-result strong { color: #a64c65; font-size: 50px; line-height: .98; margin: 0 0 14px; max-width: 3.8em; }
.spectrum .traits { flex-wrap: wrap; gap: 6px; }
.spectrum .traits span { border-color: var(--line); background: #fff9fa; font-size: 10px; padding: 4px 8px; }
.spectrum .palette { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.spectrum .hero-palette { background: #fff; border: 1px solid var(--line); }
.spectrum .season-tabs button { color: var(--ink); border-color: var(--line); background: #fff; }
.spectrum .season-tabs button[aria-pressed=true] { color: #9f425c; background: #fff0f2; border-color: #ff617a; }
.spectrum .sample-disclaimer { color: #71656c; }
.spectrum .feature-image-icon { color: var(--ink); background: #fff; }
.spectrum .number, .spectrum .feature-copy > a { color: #a64c65; }
.spectrum .passport-feature-art { background: #fff0f2; }
.spectrum .passport-feature-art strong { color: #a64c65; }
.spectrum .passport-feature-art .palette { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 7px; }
.spectrum .closing { background: #fff0f2; color: var(--ink); border: 1px solid var(--line); }
.spectrum .download-dock { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: 0 -6px 22px #29212705; }
.spectrum .dock-copy span { color: #81777d; }
.spectrum .dock-copy strong { font: 22px/1.15 Georgia, serif; letter-spacing: -.5px; }
.spectrum .dock-copy { gap: 3px; }
.spectrum .dock-copy .dock-rating { display: flex; align-items: center; gap: 7px; color: var(--ink); line-height: 1; }
.spectrum .dock-stars { width: 96px; height: 18px; flex-shrink: 0; }
.spectrum .dock-score { font-size: 15px; font-weight: 500; letter-spacing: -.4px; }
.spectrum .dock-copy .dock-rating-label { font-size: 8px; line-height: 1.2; }
.spectrum .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spectrum .makeup-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); background: linear-gradient(transparent, #fff 7%, #fff 93%, transparent); box-shadow: 0 0 5px #29212735; pointer-events: none; }
.spectrum .makeup-label { position: absolute; top: 12px; background: #ffffffed; color: var(--ink); padding: 5px 8px; border: 1px solid #ffffffb3; border-radius: 20px; font-size: 9px; line-height: 1; }
.spectrum .makeup-label.before { left: 12px; }
.spectrum .makeup-label.after { right: 12px; }
.spectrum .art-example { position: absolute; right: 10px; top: 10px; border: 1px solid #ffffffb3; color: var(--ink); background: #fffef4ed; padding: 4px 7px; border-radius: 20px; font-size: 8px; line-height: 1.2; }
.spectrum .match-overlay, .spectrum .look-rating { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid #fff; border-radius: 12px; color: var(--ink); background: #ffffffed; box-shadow: 0 4px 16px #29212712; backdrop-filter: blur(10px); }
.spectrum .match-overlay svg { width: 36px; height: 36px; flex-shrink: 0; }
.spectrum .match-overlay > span, .spectrum .look-rating > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.spectrum .match-overlay strong { font-size: 23px; line-height: 1; font-weight: 400; letter-spacing: -.8px; }
.spectrum .match-overlay small, .spectrum .look-rating small { font-size: 9px; line-height: 1.3; }
.spectrum .shopping-scan { position: absolute; width: 60px; height: 48px; top: 27%; left: 50%; transform: translateX(-50%); border: 1.5px solid #ffffffd9; border-radius: 9px; box-shadow: 0 0 0 5px #ffffff14; }
.spectrum .shopping-scan i { width: 6px; height: 6px; border-radius: 50%; background: #fff; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); box-shadow: 0 0 10px #fff9; }
.spectrum .rating-star { font-size: 37px; line-height: 1; color: #a64c65; }
.spectrum .look-rating strong { font-size: 25px; line-height: 1; font-weight: 400; }
.spectrum .look-rating strong small { font-size: 14px; color: #81777d; margin-left: 2px; }
.spectrum #rate-look .feature-image img { object-position: 55% center; }
.spectrum #outfit-match .feature-copy h3 { font-size: 24px; }
.spectrum #combos .feature-image { background: #fffbfa; }
.spectrum #combos .feature-image img { object-fit: contain; }
@media (max-width: 760px) {
  .spectrum .hero-intro > p { max-width: 355px; font-size: 11px; line-height: 1.6; }
  .spectrum .result-card { --portrait-size: clamp(96px, calc(60vw - 96px), 152px); }
  .spectrum .color-halo .face-photo { inset: 9px; }
  .spectrum .spectrum-pair { gap: 20px; }
  .spectrum .season-result strong { font-size: 38px; margin: 0 0 10px; }
  .spectrum .traits { gap: 5px; }
  .spectrum .traits span { font-size: 8px; padding: 4px 7px; }
  .spectrum .sample-disclaimer { font-size: 7px; }
  .spectrum .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spectrum .makeup-label { font-size: 7px; top: 9px; padding: 4px 7px; }
  .spectrum .makeup-label.before { left: 9px; }
  .spectrum .makeup-label.after { right: 9px; }
  .spectrum .art-example { font-size: 7px; padding: 3px 6px; }
  .spectrum .match-overlay, .spectrum .look-rating { left: 9px; right: 9px; bottom: 9px; padding: 7px 8px; gap: 7px; border-radius: 9px; }
  .spectrum .match-overlay svg { width: 28px; height: 28px; }
  .spectrum .match-overlay strong { font-size: 20px; }
  .spectrum .match-overlay small, .spectrum .look-rating small { font-size: 8px; }
  .spectrum .shopping-scan { width: 47px; height: 37px; top: 25%; }
  .spectrum .look-rating strong { font-size: 22px; }
  .spectrum .look-rating strong small { font-size: 12px; }
  .spectrum .rating-star { font-size: 31px; }
  .spectrum #outfit-match .feature-copy h3 { font-size: 22px; }
}
@media (max-width: 360px) {
  .spectrum #outfit-match .feature-copy h3 { font-size: 20px; }
  .spectrum .match-overlay { gap: 5px; padding: 7px 6px; }
  .spectrum .match-overlay svg { width: 24px; height: 24px; }
  .spectrum .match-overlay strong { font-size: 18px; }
  .spectrum .match-overlay small { font-size: 7px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .spectrum .hero-intro > p { font-size: 10px; margin-top: 7px; }
  .spectrum .season-result strong { font-size: 32px; margin-bottom: 8px; }
  .spectrum .traits span { font-size: 7px; padding: 3px 6px; }
  .spectrum .sample-disclaimer { font-size: 6px; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .spectrum .hero-intro > p { display: block; font-size: 9px; line-height: 1.5; margin-top: 6px; }
  .spectrum .season-result strong { font-size: 28px; margin-bottom: 7px; }
  .spectrum .traits { gap: 4px; }
  .spectrum .traits span { font-size: 6px; padding: 2px 5px; }
  .spectrum .sample-disclaimer { font-size: 5px; }
}