/* A playful sample interface; photo colors use Peony's real renderer. */
.welcome-demo { width:100%; max-width:470px; margin:27px auto 0; text-align:left; }
.demo-reel { position:relative; isolation:isolate; aspect-ratio:.92; overflow:hidden; border:1px solid #ffffffeb; border-radius:29px; background:radial-gradient(ellipse at 0 65%,#d5ebffbd,transparent 55%),radial-gradient(ellipse at 100% 5%,#f7cceca8,transparent 54%),linear-gradient(145deg,#f5edff,#eae2ff 60%,#f9dded); box-shadow:0 24px 48px -27px #73459366,inset 0 1px 0 #fff; color:#513365; }
.demo-reel::before { content:''; position:absolute; pointer-events:none; width:52%; height:50%; border:1px solid #ffffff80; border-radius:50%; right:-27%; bottom:-10%; background:#ffffff17; }
.demo-photo { position:absolute; top:57px; left:22px; right:22px; bottom:107px; overflow:hidden; border:4px solid #fff; border-radius:20px; background:#736473; box-shadow:0 11px 30px -15px #56356a72; }
.demo-photo::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 48%,#22172d20 67%,#22172dc9 100%); }
.demo-photo-stage { position:absolute; inset:0; transform:scale(1.025); }
.demo-shot { position:absolute; inset:0; opacity:0; transition:opacity .82s cubic-bezier(.22,.61,.36,1); }
.demo-shot.is-current { opacity:1; }
.demo-shot img { width:100%; height:100%; object-fit:cover; object-position:50% 35%; display:block; }
.welcome-demo[data-ready='false'] .demo-shot img { object-position:65% 40%; transform:scale(1.2); }
.demo-topline { position:absolute; z-index:2; top:7px; left:24px; right:13px; display:flex; align-items:center; justify-content:space-between; }
.demo-example { display:flex; align-items:center; gap:7px; color:#705382; font-size:9px; font-weight:650; letter-spacing:1.45px; }
.demo-example i { width:5px; height:5px; border-radius:50%; background:#b766b7; box-shadow:0 0 0 4px #ffffff6e; }
#demoPlayback { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid #ffffffa3; border-radius:50%; background:#ffffff52; color:#795189; box-shadow:0 2px 8px #70478408; }
#demoPlayback svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#demoPlayback .demo-play { display:none; width:16px; height:16px; }
#demoPlayback[aria-pressed='true'] .demo-pause { display:none; }
#demoPlayback[aria-pressed='true'] .demo-play { display:block; }
.demo-caption { position:absolute; z-index:2; bottom:132px; left:40px; right:40px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; pointer-events:none; }
.demo-caption>div { display:flex; flex-direction:column; gap:6px; }
#demoFinish { font-size:11px; color:#ffffffdb; letter-spacing:.1px; }
#demoLookName { color:#fff; font-size:27px; font-weight:550; letter-spacing:-1px; line-height:1.1; }
#demoCount { padding-bottom:2px; color:#fff; font-size:10px; font-variant-numeric:tabular-nums; letter-spacing:1px; white-space:nowrap; }
#demoCount i { font-style:normal; color:#ffffff9c; }
.demo-timeline { position:absolute; z-index:2; bottom:120px; left:41px; right:41px; display:flex; gap:5px; }
.demo-timeline>span { height:2px; flex:1; background:#ffffff38; overflow:hidden; border-radius:2px; }
.demo-timeline i { display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left; }
.demo-controls { position:absolute; z-index:3; bottom:15px; left:12px; right:12px; height:83px; }
.demo-swatches { position:relative; width:100%; height:100%; }
.demo-swatches button { position:absolute; display:grid; place-items:center; width:56px; min-width:44px; height:56px; min-height:44px; top:18px; left:calc(14% - 28px); padding:6px; border:1px solid #ffffffeb; background:linear-gradient(135deg,#ffffffd9,#ffffff62); border-radius:50%; box-shadow:0 9px 18px -8px #74478950,inset 0 1px 0 #fff; transition:box-shadow .25s ease,border-color .25s ease; transform-origin:center; }
.demo-swatches button:nth-child(2) { left:calc(38% - 28px); top:4px; }
.demo-swatches button:nth-child(3) { left:calc(62% - 28px); top:4px; }
.demo-swatches button:nth-child(4) { left:calc(86% - 28px); top:18px; }
.demo-swatches button>span { position:relative; display:block; height:42px; width:42px; border-radius:50%; background:var(--demo-color); box-shadow:inset 3px 2px 7px #ffffff54,inset -3px -2px 5px #341e3726; }
.demo-swatches button>span::after { content:''; position:absolute; left:8px; top:6px; width:16px; height:7px; border-radius:50%; background:#ffffff70; transform:rotate(-35deg); filter:blur(.4px); }
.demo-swatches button[aria-pressed='true'] { border-color:#8f59ab; box-shadow:0 0 0 3px #fff9,0 0 0 4px #bd8fda6b,0 10px 22px -7px #9354ba80,inset 0 1px 0 #fff; }
.demo-swatches button.is-tapped { border-color:#c052a3; box-shadow:0 0 0 4px #fff,0 0 0 8px #eaa6d44d,0 12px 24px -7px #9354ba80; }
.demo-swatches button>.demo-glazed { background:linear-gradient(125deg,#9e82c1 8%,#dbccf2 33%,#f5eaff 44%,#b59bd7 62%,#a087c8 100%); }
.demo-swatches button>.demo-french { background:linear-gradient(#fff9f0 0 25%,var(--demo-color) 28%); }
.welcome-demo[data-ready='false'] .demo-swatches button { opacity:.7; }
.demo-cursor { width:28px; height:36px; position:absolute; z-index:5; top:0; left:0; opacity:0; overflow:visible; pointer-events:none; filter:drop-shadow(0 3px 3px #5f307447); will-change:transform; transform-origin:3px 2px; }
.demo-cursor path { fill:#fff; stroke:#794b92; stroke-width:1.8; stroke-linejoin:round; }
.demo-cursor .demo-cursor-stem { fill:none; stroke-width:3; stroke-linecap:round; }
.demo-click { position:absolute; z-index:4; top:0; left:0; width:38px; height:38px; opacity:0; pointer-events:none; }
.demo-click i { position:absolute; inset:7px; border:1.5px solid #a055b9; border-radius:50%; }
.demo-click svg { position:absolute; inset:0; width:38px; height:38px; fill:#a76ac2; }
.demo-sparkle { position:absolute; z-index:2; width:24px; height:24px; fill:#fff; stroke:#c59bdf; stroke-width:.6; pointer-events:none; }
.demo-sparkle-one { top:47%; left:10px; transform:rotate(8deg); }
.demo-sparkle-two { width:18px; height:18px; right:12px; bottom:97px; fill:#fcf7ff; }
.demo-tip { margin:12px auto 0; padding:0 12px; max-width:370px; color:#786b84; font-size:11px; line-height:1.6; text-align:center; }
.welcome-demo button:focus-visible { outline:2px solid #67418c; outline-offset:4px; }
.welcome-demo[data-ready='error'] .demo-photo { bottom:22px; }
.welcome-demo[data-ready='error'] .demo-caption { bottom:43px; }
/* Give the photo and first actions room together on a desktop. */
@media(min-width:960px) {
  body[data-screen='welcome'] .welcome-screen {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,470px);
    align-items:center;
    gap:clamp(36px,5vw,72px);
    width:min(100%,1050px);
    margin:clamp(12px,3vh,32px) auto 16px;
    text-align:left;
  }
  body[data-screen='welcome'] .welcome-copy { min-width:0; }
  body[data-screen='welcome'] .welcome-copy h1 { margin-left:0; margin-right:0; }
  body[data-screen='welcome'] .welcome-copy>p:not(.eyebrow) { margin-left:0; margin-right:0; }
  body[data-screen='welcome'] .welcome-actions { margin-left:0; margin-right:0; }
  body[data-screen='welcome'] .welcome-demo { margin:0; justify-self:end; }
}
@media(min-width:960px) and (max-height:740px) {
  body[data-screen='welcome'] main { padding-top:10px; padding-bottom:16px; }
  body[data-screen='welcome'] .welcome-screen { margin-top:8px; margin-bottom:8px; }
}
@media(max-width:370px) {
  .welcome-demo { margin-top:20px; }
  .demo-reel { aspect-ratio:.84; border-radius:25px; }
  .demo-photo { left:16px; right:16px; top:54px; bottom:102px; border-radius:17px; }
  .demo-topline { left:20px; right:10px; }
  .demo-caption { left:30px; right:30px; bottom:127px; }
  #demoFinish { font-size:10px; }
  #demoLookName { font-size:23px; }
  .demo-timeline { left:31px; right:31px; bottom:115px; }
  .demo-controls { left:7px; right:7px; bottom:11px; }
  .demo-swatches button { width:52px; height:52px; padding:5px; margin-left:2px; }
  .demo-swatches button>span { width:40px; height:40px; }
  .demo-sparkle-one { left:6px; width:20px; height:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .demo-shot,.demo-swatches button { transition:none!important; }
  .demo-photo-stage,.demo-shot img { transform:none!important; }
  .demo-cursor,.demo-click { display:none!important; }
  .demo-timeline i { transform:scaleX(0)!important; }
  .demo-timeline .is-current i { transform:scaleX(1)!important; }
}
@media(prefers-reduced-transparency:reduce) {
  .demo-reel { background:#eee4fa; }
  #demoPlayback { background:#fff; }
  .demo-swatches button { background:#fff; }
}