/* The first welcome stage shares the landing's semantic text/control tokens.
   Preview skies, tiny stars, and haze are decorative illustrations only. */
.appearance-setup[hidden], .lumi-intro [data-intro-scene][hidden] { display: none; }
.lumi-intro[data-opening-step="appearance"] > .night-backdrop { display: none; }
.lumi-intro[data-opening-step="appearance"] { max-width: 100vw; }
.appearance-setup { min-height: 100svh; display: grid; place-items: center; padding: max(1.5rem,env(safe-area-inset-top)) 1.25rem max(1.5rem,env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 40%,var(--surface-soft),transparent 70%),var(--cream); }
.appearance-content { width: min(100%,38rem); min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 1.75rem; text-align: center; }
.appearance-brand { font-size: 1rem; font-weight: 600; letter-spacing: -.04em; }
.appearance-brand > span { color: var(--purple-brand); }
.appearance-heading { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: .65rem; }
.appearance-eyebrow { color: var(--moonlight); font-size: .75rem; font-weight: 500; letter-spacing: .08em; }
.appearance-heading h2 { font-size: clamp(2rem,4vw,3rem); line-height: 1.12; font-weight: var(--font-heading-weight); letter-spacing: -.04em; text-wrap: balance; }
/* The noninteractive title receives initial dialog focus, not a control ring. */
#appearance-title:focus { outline: none; }
.appearance-heading > #appearance-description { max-width: 27rem; color: var(--ink-2); font-size: 1rem; line-height: 1.6; text-wrap: balance; }
.appearance-options { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); gap: 1rem; text-align: left; }
.appearance-options legend, .appearance-option > input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.appearance-option { position: relative; min-width: 0; cursor: pointer; }
.appearance-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 2px solid var(--line); border-radius: 1.5rem; background: var(--surface-raised); }
.appearance-option > input:checked + .appearance-card { border-color: var(--purple-brand); box-shadow: 0 0 0 1px var(--purple-brand); }
.appearance-option > input:focus-visible + .appearance-card { outline: 3px solid var(--purple-brand); outline-offset: 5px; }
.appearance-preview { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 1.45; overflow: hidden; }
.appearance-preview-light { background: radial-gradient(ellipse at 50% 62%,#fff2ce,transparent 60%),linear-gradient(145deg,#f4eff8,#fdf6e8); }
.appearance-preview-dark { background: radial-gradient(ellipse at 50% 65%,#51437980,transparent 62%),linear-gradient(145deg,#24213e,#10122e); }
.appearance-preview::before,.appearance-preview::after { content: '✦'; position: absolute; z-index: -1; font-size: .7rem; color: #ffe4a8; }
.appearance-preview::before { top: 24%; left: 18%; }
.appearance-preview::after { top: 63%; right: 13%; font-size: .45rem; }
.appearance-preview-light::before,.appearance-preview-light::after { color: #735393; }
.appearance-sky-symbol { position: absolute; top: .8rem; right: 1rem; color: #ffe4a8; font-size: 1.4rem; line-height: 1; }
.appearance-preview-light .appearance-sky-symbol { color: #865923; }
.appearance-preview img { position: absolute; inset: 0; margin: auto; width: 84%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 8px 12px #10122e18); }
.appearance-preview img.is-loaded { opacity: 1; }
.appearance-card-copy { display: grid; gap: .4rem; padding: 1rem 1.1rem 1.2rem; }
.appearance-card-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 1.05rem; font-weight: 500; }
.appearance-check { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; flex-shrink: 0; border-radius: 50%; background: var(--purple-brand); color: var(--cream); font-size: .8rem; visibility: hidden; }
.appearance-option > input:checked + .appearance-card .appearance-check { visibility: visible; }
.appearance-card-description { font-size: .8rem; line-height: 1.6; color: var(--ink-2); }
.appearance-actions { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: .85rem; }
.appearance-actions .button { width: min(100%,20rem); min-width: 0; min-height: 3.25rem; padding-inline: 1rem; gap: .75rem; }
.appearance-actions p { font-size: .75rem; line-height: 1.6; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .appearance-preview img { transition: opacity .25s ease; }
  .appearance-card { transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
  @media (hover: hover) { .appearance-option:hover .appearance-card { transform: translateY(-.2rem); } }
}
@media (max-width: 37em) {
  .appearance-content { gap: 1.4rem; }
  .appearance-options { gap: .75rem; }
  .appearance-preview { aspect-ratio: 1.1; }
  .appearance-card-copy { padding: .8rem; }
}
@media (max-width: 20em) {
  .appearance-setup { padding-inline: 1rem; }
  .appearance-options { gap: .65rem; }
}