.result{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--sp-2);
  max-width:420px;
  margin:0 auto;
}

.result-drawing{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-4);
  width:100%;
  max-width:340px;
  text-align:center;
  margin:var(--sp-6) auto;
}
.result-drawing-title{
  font-family:var(--font-display);
  font-size:var(--fs-h2);
  line-height:1.2;
  margin:0;
}
.result-drawing-frame{
  position:relative;
  width:240px;
  aspect-ratio:4/5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--paper-sunken);
  box-shadow:var(--shadow-md);
}
.result-drawing-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.3;
  mix-blend-mode:overlay;
  background-image:var(--grain);
}
.result-drawing-stage{
  line-height:1.3;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--sky-ink-soft);
  margin:0;
  min-height:1.6em;
  transition:opacity .3s var(--ease);
}
.result-drawing-caption{
  font-size:var(--fs-caption);
  color:var(--sky-ink-faint);
  margin:0;
}
.result-drawing--error{margin-top:var(--sp-7)}
.result-drawing-error-text{
  font-size:var(--fs-body);
  color:var(--ink-soft);
  margin:0;
}
.result-drawing-retry{max-width:280px}
.result-eyebrow{
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sky-accent);
  font-weight:700;
}
.result-constellation{
  margin-top:var(--sp-2);
  opacity:.55;
  line-height:0;
}
.result-constellation svg{display:block;margin:0 auto;}
.result-constellation path{stroke:var(--sky-gold)}
.result-constellation circle{fill:var(--sky-gold)}
.result-title{margin-top:var(--sp-1);animation:resultFadeUp .3s var(--ease) both;animation-delay:.075s;}
.result-subtitle{
  margin:var(--sp-1) 0 0;
  color:var(--sky-ink-soft);
  font-size:var(--fs-small);
  line-height:1.5;
  animation:resultFadeUp .3s var(--ease) both;
  animation-delay:.075s;
}

.result-hero{
  animation:resultPortraitIn .4s var(--ease) both;
  position:relative;
  width:100vw;
  margin:var(--sp-4) calc(50% - 50vw) var(--sp-3);
  height:78vh;
  max-height:760px;
  min-height:480px;
  aspect-ratio:3/4;
  box-sizing:border-box;
  padding:10px 10px 0;
  background:var(--paper-raised);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-direction:column;
}
.result-hero-inner{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:var(--paper-sunken);
  box-shadow:inset 0 0 0 1px var(--line);
}
.result-hero-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}
.result-hero-inner img.pencil-sketch{filter:url(#pencil-sketch-filter)}
.result-hatch{opacity:.14}
.result-hero-inner::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, var(--gold) 0%, var(--accent-tint) 100%);
  opacity:.14;
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.result-hero-caption{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:var(--sp-2) 0;
}
.result-hero-caption-title{
  font-family:var(--font-script);
  font-style:italic;
  font-size:var(--fs-body);
  color:var(--ink-soft);
}
.result-hero-caption-sign{
  font-size:var(--fs-caption);
  color:var(--gold);
  font-weight:700;
}
.result-hero--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-faint);
  font-size:var(--fs-small);
}

@media (min-width:960px){
  .result{max-width:560px;}
  .result-hero{
    width:100%;
    margin:var(--sp-4) 0 var(--sp-3);
    height:auto;
    max-height:none;
    min-height:0;
    aspect-ratio:4/5;
    border-radius:var(--r-lg);
  }
  .result-hero-inner{border-radius:var(--r-md);}
}

.result-text{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  text-align:left;
  width:100%;
  margin-top:var(--sp-2);
  padding:var(--sp-5);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
}
.result-line{
  margin:0;
  font-size:var(--fs-body);
  color:var(--ink);
  line-height:1.6;
  animation:resultFadeUp .3s var(--ease) both;
}
.result-line:first-child{
  font-family:var(--font-display);
  font-size:var(--fs-body-lg);
  line-height:1.4;
}
.result-line:nth-child(1){animation-delay:.15s}
.result-line:nth-child(2){animation-delay:.225s}
.result-line:nth-child(3){animation-delay:.3s}
.result-line:nth-child(4){animation-delay:.375s}
.result-line:nth-child(5){animation-delay:.45s}

.result-insight{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  text-align:left;
  width:100%;
  margin-top:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);
  background:var(--gold-soft);
  border-radius:var(--r-lg);
}
.result-insight-line{
  margin:0;
  font-size:var(--fs-small);
  color:var(--ink);
  line-height:1.5;
  animation:resultFadeUp .3s var(--ease) both;
}
.result-insight-line:nth-child(1){animation-delay:.525s}
.result-insight-line:nth-child(2){animation-delay:.6s}
.result-insight-line:nth-child(3){animation-delay:.675s}

.result-save{margin-top:var(--sp-5);width:100%;animation:resultFadeUp .3s var(--ease) both;animation-delay:.75s;}

@keyframes resultFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes resultPortraitIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}

.result-restart{
  display:inline-block;
  margin-top:var(--sp-6);
  color:var(--sky-ink-faint);
  font-size:var(--fs-small);
  text-decoration:underline;
}

.result-footer{
  margin-top:var(--sp-4);
  padding-bottom:var(--sp-4);
}
.result-disclaimer{
  margin:0 0 var(--sp-1);
  color:var(--sky-ink-faint);
  font-size:11px;
}
.result-footer-link{
  color:var(--sky-ink-faint);
  font-size:11px;
  text-decoration:underline;
  margin-right:var(--sp-2);
}