/* Invitation layer only. Wallpaper, image framing and GuigoOS remain untouched. */
.introduction {
  position:absolute; z-index:6;
  left:max(clamp(18px,4vw,70px),env(safe-area-inset-left));
  top:50%; width:min(29vw,340px);
  padding:28px 22px 24px;
  color:#f3ede2; font-family:Georgia,'Times New Roman',serif;
  background:linear-gradient(115deg,rgba(12,15,24,.89),rgba(15,18,27,.72) 70%,rgba(15,18,27,.28));
  border-left:1px solid #efe6d438; border-radius:2px 45px 3px 2px;
  text-shadow:0 2px 12px #060910;
  pointer-events:none; opacity:0; visibility:hidden;
  transform:translate(-35px,-50%);
  transition:opacity .4s ease,transform .55s cubic-bezier(.22,.68,.2,1),visibility 0s .55s;
}
.introduction[data-visible="true"] {opacity:1;visibility:visible;transform:translate(0,-50%);transition-delay:0s}
.intro-heading {position:relative}
.introduction h2 {font-size:clamp(29px,3.2vw,46px);font-weight:400;line-height:1.07;letter-spacing:-1.4px;margin:0}
.introduction h2 em {display:block;font-size:1.4em;font-weight:400;margin:2px 0 0 13px;letter-spacing:-2px}
.intro-art {display:block;width:128px;height:89px;margin:10px 0 8px 4px;opacity:.84}
.intro-copy {font-size:15px;line-height:1.65;margin:10px 0 24px;color:#e0dacf;text-wrap:pretty}
.intro-copy span {display:block;margin-top:7px}
.intro-enter {position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:8px 0 12px;background:none;border:0;border-radius:0;font:italic 20px Georgia,serif;text-align:left;white-space:nowrap;pointer-events:none;transition:color .2s}
.introduction[data-visible="true"] .intro-enter {pointer-events:auto}
.intro-enter>span {font:25px Georgia,serif;transition:transform .25s}
.intro-enter svg {position:absolute;bottom:0;left:0;width:100%;height:10px;fill:none;stroke:currentColor;stroke-width:1;opacity:.55;transition:opacity .25s}
.intro-enter:hover>span {transform:translate(3px,-3px)}
.intro-enter:hover svg,.intro-enter:focus-visible svg {opacity:1}
.intro-enter:focus-visible {outline:2px solid #fff4df;outline-offset:5px}
.intro-hint {font:12px/1.5 Georgia,serif;color:#cbc5bc;margin:15px 0 0}
@media (max-height:650px) and (min-aspect-ratio:23/20) {
  .introduction {padding:18px;width:min(30vw,320px)}
  .introduction h2 {font-size:29px}.introduction h2 em {font-size:1.25em}
  .intro-art {position:absolute;right:0;top:1px;width:61px;height:48px;opacity:.55;margin:0}
  .intro-copy {font-size:13px;line-height:1.45;margin:14px 0}
  .intro-copy span {margin-top:4px}.intro-enter {font-size:17px}.intro-hint{font-size:11px;margin-top:12px}
}
@media (max-aspect-ratio:23/20) {
  .introduction {top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));width:min(470px,calc(100% - max(18px,env(safe-area-inset-left)) - max(18px,env(safe-area-inset-right))));padding:18px 20px 16px;border-radius:2px 35px 2px 2px;transform:translateY(-24px)}
  .introduction[data-visible="true"] {transform:translateY(0)}
  .introduction h2 {font-size:clamp(30px,7vw,42px);letter-spacing:-1px;padding-right:58px}
  .introduction h2 em {display:inline;font-size:1.12em;margin-left:4px;letter-spacing:-1.3px}
  .intro-art {position:absolute;right:-8px;top:-6px;width:70px;height:57px;margin:0}
  .intro-copy {font-size:14px;line-height:1.45;margin:12px 0 7px}
  .intro-copy span {display:inline;margin:0}
  .intro-enter {font-size:20px;width:100%;min-height:48px}
  .intro-hint {font-size:11px;margin-top:10px}
}
@media (max-aspect-ratio:23/20) and (max-height:650px) {
  .introduction {top:max(10px,env(safe-area-inset-top));padding:13px 16px 12px}
  .introduction h2 {font-size:28px}.intro-copy {font-size:13px;line-height:1.4;margin-top:10px}.intro-hint{margin-top:7px}
}
@media(prefers-reduced-motion:reduce) {
  .introduction,.intro-enter,.intro-enter>span,.intro-enter svg {transition:none!important}
}
/* Keyframes also animate a cached image's first paint; no timer delays navigation. */
.introduction {--intro-from:translate(-35px,-50%);--intro-to:translate(0,-50%)}
.introduction[data-visible="true"] {animation:intro-arrive .65s cubic-bezier(.22,.68,.2,1) both}
@keyframes intro-arrive {from{opacity:0;transform:var(--intro-from)}to{opacity:1;transform:var(--intro-to)}}
@media(max-aspect-ratio:23/20) {.introduction {--intro-from:translateY(-24px);--intro-to:translateY(0)}}

.introduction[data-visible="true"] .intro-links{pointer-events:auto}.intro-links:focus-visible{outline:2px solid #fff4df;outline-offset:5px}

/* Room-only additions. The invitation's original frame, copy and entry stay intact. */
.room-sound{display:flex;align-items:center;gap:8px;height:33.6px;margin:12px 0 8px;min-width:0;color:inherit}
.room-sound-toggle,.room-sound-mute{flex:none;margin:0;padding:0;background:none;border:0;border-radius:0;color:inherit;font:24px/30px GuigoHand,'Yu Mincho',cursive;white-space:nowrap;min-height:30px;text-align:left}
.room-sound-toggle{border-bottom:1px solid #d5bd84}
.room-sound-mute{font-size:18px;line-height:30px}
.room-sound-controls{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:30px}
.room-sound input{appearance:none;-webkit-appearance:none;flex:1;width:64px;min-width:28px;max-width:78px;height:24px;margin:0;background:none;accent-color:#ddc69c}
.room-sound input::-webkit-slider-runnable-track{height:1px;background:#d5bd84b3}
.room-sound input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;margin-top:-4px;border:1px solid #ead5ae;border-radius:50%;background:#29221e}
.room-sound input::-moz-range-track{height:1px;background:#d5bd84b3}
.room-sound input::-moz-range-thumb{width:9px;height:9px;border:1px solid #ead5ae;border-radius:50%;background:#29221e}
.introduction[data-visible=true] .room-sound :is(button,input){pointer-events:auto}
.room-sound button:hover{color:#f7deb0}.room-sound :focus-visible{outline:1.5px solid #e7cfa2;outline-offset:3px}
.room-ornaments{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;color:#d7c4a4}
.room-ornaments svg{position:absolute;pointer-events:none;opacity:.74}
body[data-state=room]:not(.at-welcome) .experience-tools [data-home]{position:fixed;left:max(clamp(18px,4vw,70px),env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));margin:0;padding:0;min-height:44px;max-width:calc(100vw - 36px);background:none;border:0;font:24px/1.2 GuigoHand,'Yu Mincho',cursive;color:#e2d0af;text-align:left;white-space:normal;text-shadow:0 2px 10px #090a14}
body[data-state=room]:not(.at-welcome) .experience-tools [data-home]:hover{color:#f5e4c6}
@media(max-width:600px){body[data-state=room]:not(.at-welcome) .experience-tools [data-home]{font-size:22px;left:max(18px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom))}}

/* Local language choices occupy only the invitation's existing bottom padding. */
.introduction .room-language{position:absolute;bottom:1px;right:22px;display:flex;align-items:center;gap:12px;max-width:calc(100% - 44px);font:20px/22px GuigoHand,'Yu Mincho',cursive;color:inherit}
.room-language button{font:inherit;color:inherit;background:none;border:0;padding:0;min-height:22px;white-space:nowrap}
.room-language .local-language-choices{display:flex;align-items:center;gap:12px;font-size:18px}
.introduction[data-visible=true] .room-language button{pointer-events:auto}
.room-language button[aria-pressed=true]{text-decoration:underline;text-underline-offset:3px}
.room-language button:focus-visible{outline:1.5px solid #e7cfa2;outline-offset:2px}
@media(max-aspect-ratio:23/20){.introduction .room-language{bottom:-4px;right:20px;font-size:18px;line-height:20px;gap:10px}.room-language button{min-height:20px}.room-language .local-language-choices{font-size:16px;gap:10px}}