:root {
  --ink-dim: #c4bde0;
}

body:has(#screen-intro.active) .bg-scene::after,
body:has(#screen-invite.active) .bg-scene::after {
  background: linear-gradient(180deg, rgba(13, 11, 30, .86) 0%, rgba(13, 11, 30, .66) 55%, rgba(13, 11, 30, .78) 100%);
}

.title { font-size: clamp(40px, 12vw, 56px); line-height: 1.1; letter-spacing: -.01em; }
.title-pre { font-size: .44em; margin-bottom: .18em; color: rgba(251, 227, 166, .9); }

.voice.lede {
  font-family: var(--sans); font-weight: 400;
  font-size: 15.5px; line-height: 1.7; letter-spacing: -.01em;
  color: rgba(242, 236, 255, .88);
  margin-top: 14px;
}

.memo { margin-top: 22px; }
.memo-n { font: 400 15px/1.6 var(--sans); color: rgba(242, 236, 255, .82); }
.memo-n b { font: 700 22px/1 var(--roman); }
.m-ko { color: #ffb3c4; }
.m-er { color: #9ee8dc; }
.memo-t { font: 700 16px/1.6 var(--sans); color: var(--gold-hi); }

.letter, .paper { --paper-line: transparent; --ink-soft: rgba(46, 34, 56, .82); }
.letter { padding: 34px 24px 24px; }
.letter .l-blank { height: 22px; }
.letter .l-k { font-size: 18px; color: #6b4a2a; }
.letter .l-in { font-size: 18px; color: var(--paper-ink); border-bottom-color: rgba(46, 34, 56, .45); }
.letter .l-in::placeholder { color: rgba(46, 34, 56, .5); font-size: 16px; }
.letter .l-hint { font-size: 14px; line-height: 1.55; margin-top: 10px; }

.letter .btn-lg { min-height: 54px; font-size: 16px; border-radius: 14px; }
.letter .btn-line { min-height: 50px; margin-top: 12px; border: 1.5px solid rgba(46, 34, 56, .35); font-size: 15px; }
.letter .btn-line:hover { background: rgba(46, 34, 56, .05); }

.letter .btn.done {
  background: var(--paper-ink); color: #f6dfa0;
  box-shadow: inset 0 0 0 1.5px rgba(232, 196, 122, .55);
  animation: sentPop .35s var(--ease) both;
}
.letter .btn.done:focus-visible { outline: 2px solid rgba(123, 90, 54, .55); outline-offset: 3px; }
.letter .l-hint.done { font: 700 14px/1.55 var(--sans); color: var(--paper-ink); }
@keyframes sentPop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: none; } }

.note, .intro > .note, .intro-home .note { font-size: 13px; line-height: 1.7; color: var(--ink-dim); }
.intro-home .note { margin-top: 14px; }

.invite-desc { font-size: 15px; line-height: 1.65; color: var(--ink-dim); }
.env-hint { font-size: 15px; }

.pyr header small { font-size: 13px; color: var(--ink-dim); }

.kr-desc { font-family: var(--sans); font-size: 16px; line-height: 1.75; color: rgba(242, 236, 255, .9); }

.paper .v-sub,
.paper .v-desc { font: 400 16px/1.8 var(--sans); color: var(--paper-ink); letter-spacing: -.01em; }
.paper .reading p { font: 400 15px/1.75 var(--sans); color: rgba(46, 34, 56, .84); letter-spacing: -.01em; }
.paper .r-k { font-size: 13px; }
.ps-row { font-family: var(--sans); color: rgba(46, 34, 56, .8); }
.ps-row.cur { color: var(--paper-ink); }
.ps-line { font: 400 15px/1.75 var(--sans); }
.ps-k { font-size: 13px; }

.ugc { font-size: 14px; color: var(--ink-dim); }
.how { font-size: 14px; color: var(--ink-dim); }
.how p { line-height: 1.7; }

.btn { border-radius: 14px; }
.ko-result .btn-primary { min-height: 52px; font-size: 16px; }
.actions .btn { min-height: 50px; }
.actions .btn-ghost { border-color: rgba(232, 196, 122, .32); }

.nm b { line-height: 1.5; }
.names:not(.long) .and { height: 39px; }

@media (min-width: 760px) {
  .names.long { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .names.long .nm:first-child { justify-self: end; }
  .names.long .nm:last-child { justify-self: start; }
  .names.long .and { height: 39px; }
  .names.long .nm b { font-size: 26px; }
  .names.long .nm .erinn { font-size: 18px; }
}

@media (min-width: 960px) {
  .answer {
    max-width: 980px; display: grid; grid-template-columns: minmax(0, 600px) 320px;
    column-gap: 44px; justify-content: center; align-items: start;
  }
  .answer > .verdict { grid-column: 1; grid-row: 1; }
  .answer > .actions,
  body.reveal .answer > .actions {
    grid-column: 2; grid-row: 1; position: sticky; top: 24px; margin-top: 40px;
    align-items: stretch; gap: 10px; padding: 22px 20px 12px; border-radius: 16px;
    background: rgba(13, 11, 30, .8); border: 1px solid rgba(232, 196, 122, .22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .answer > .actions > .btn-primary,
  .answer > .actions > .btn-wide { max-width: none; }
  .answer > .actions .btn-link { align-self: center; }
  .answer > .actions .ugc,
  .answer > .actions .vow-note { text-align: center; }
  .answer > .actions .vow-note { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
}

@media (max-width: 959px) and (orientation: portrait) {
  .intro .logo-link { margin-bottom: 28px; }
}
@media (max-width: 400px) and (max-height: 760px) and (orientation: portrait) {
  .intro .logo-link { margin-bottom: 16px; }
}

@media (min-width: 960px) {
  .intro.invite {
    max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: 1fr repeat(5, auto) 1fr;
    column-gap: 80px; align-items: start;
    text-align: left; min-height: calc(100vh - 84px); min-height: calc(100dvh - 84px);
  }
  .intro.invite > * { grid-column: 1; }
  .intro.invite > .logo-link { grid-row: 2; }
  .intro.invite > .title { grid-row: 3; }
  .intro.invite > .invite-desc { grid-row: 4; }
  .intro.invite > .voice { grid-row: 5; }
  .intro.invite > #inv-home { grid-row: 6; }
  .intro.invite .logo-link { margin: 0 0 28px; }
  .intro.invite .title.title-sm { font-size: clamp(44px, 4.2vw, 60px); }
  .intro.invite .invite-desc { margin-left: 0; font-size: 17px; }
  .intro.invite .voice { text-align: left; font-size: 19px; min-height: 0; }
  .invite #inv-home { margin: 14px 0 0 -8px; justify-self: start; }
  .intro.invite .envelope,
  .intro.invite #invite-form { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: end; width: 100%; max-width: 460px; }
  .intro.invite .envelope { width: min(100%, 440px); margin: calc(24px + min(100%, 440px) * .29) 0 44px; }
}
@supports not (aspect-ratio: 8 / 5) {
  @media (min-width: 960px) { .intro.invite .envelope { padding-top: calc(min(100%, 440px) * .625); } }
}

@media (min-width: 960px) {
  body:has(#screen-intro.active) .bg-scene::after {
    background:
      linear-gradient(90deg, rgba(13, 11, 30, .72) 0%, rgba(13, 11, 30, .35) 55%, rgba(13, 11, 30, .2) 100%),
      linear-gradient(180deg, rgba(13, 11, 30, .7) 0%, rgba(13, 11, 30, .45) 55%, rgba(13, 11, 30, .7) 100%);
  }
  .intro.intro-home { column-gap: 80px; }
  .intro-home .title { font-size: clamp(56px, 5.4vw, 80px); }
  .intro-home .voice.lede { font-size: 18px; margin-top: 20px; }
  .memo-n { font-size: 16px; } .memo-n b { font-size: 26px; } .memo-t { font-size: 18px; }
  .intro-home .intro-side { max-width: 460px; justify-self: end; width: 100%; }
}