.intro { position: fixed; inset: 0; z-index: 100; background: #f1f0e8; color: #324c5f; color-scheme: light; padding: 0 clamp(24px,5vw,84px); display: flex; flex-direction: column; overflow: auto; isolation: isolate; }
.intro[hidden] { display: none; }
.intro::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.25' d='M0 0h140v140H0z'/%3E%3C/svg%3E"); }
.intro button,.intro a { color: inherit; font: inherit; cursor: pointer; }.intro button:focus-visible,.intro a:focus-visible { outline: 2px solid #648496; outline-offset: 6px; }
.intro-top { display: flex; justify-content: space-between; align-items: center; padding: 27px 0 20px; gap: 24px; border-bottom: 1px solid #37516025; }
.intro-identity { display: flex; align-items: center; gap: 13px; font: italic 47px/.9 Georgia!important; text-decoration: none; }.intro-identity span { font: 9px/1.8 'DM Mono',sans-serif; letter-spacing: .12em; }
.intro-top p { font-size: 11px; line-height: 1.9; margin: 0; }.intro-top p span { font: 8px 'DM Mono',monospace; letter-spacing: .13em; opacity: .5; }
.intro-skip { border: 0; border-bottom: 1px solid #38566477; background: transparent; padding: 8px 0; font-size: 10px!important; }
.intro-hero { flex: 1; min-height: 280px; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 38px 0 30px; }
.intro-greeting { font: 29px 'Nanum Pen Script',cursive; text-align: center; margin: 0 0 12px; color: #748b95; }
.intro-title { font: 400 clamp(56px,8.3vw,142px)/1 'Nanum Pen Script',cursive; letter-spacing: -.035em; margin: 25px 0; text-align: center; color:#294b63; }
#intro-letters { display: flex; align-items: center; justify-content:center; gap: .28em; min-height: 1.6em; }
.intro-title-line { display: flex; justify-content: center; align-items: center; height: 1.5em; }
.intro-letter { position:relative; border:0; padding:0!important; background:transparent; font:inherit!important; letter-spacing:inherit; height:1.25em; min-width:.18em; flex-shrink:0; cursor:pointer; touch-action:manipulation; color:#294b63; }
.intro-letter-art { display:block; position:relative; transform:translateX(var(--shift,0px)); transition:transform .45s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.intro-char { display:block; font-size:1.34em; color:currentColor; opacity:1; transition:opacity .22s ease; }
.intro-glyph-frame { position:absolute; left:50%; top:50%; width:1.5em; height:var(--glyph-height,1.2em); transform:translate(-50%,-50%); pointer-events:none; display:flex; align-items:center; justify-content:center; }
.intro-glyph { max-width:100%; height:100%; object-fit:contain; display:block; opacity:0; transform:scale(.65); transform-origin:50% 65%; pointer-events:none; }
.intro-letter.is-revealed { z-index:3; }
.intro-letter.is-revealed .intro-char { opacity:0; }
.intro-letter.is-revealed .intro-glyph { opacity:1; transform:scale(1); }
.intro-glyph-frame { transform:translate(-50%,-50%) scale(var(--art-fit,1)); transition:transform .5s cubic-bezier(.22,1,.36,1); }
.intro-instruction { transition:opacity .6s ease,translate .6s ease; }
.intro.is-demonstrating .intro-instruction { opacity:0; translate:0 5px; }
.intro.is-demonstrating .intro-letter-art { transition-duration:.65s; }
.intro-space { width: .25em; }
.intro-tag { position: absolute; font: 20px 'Nanum Pen Script',cursive; z-index: 2; pointer-events: none; padding: 5px 14px; background: #d5e5e8; box-shadow: 1px 3px 4px #45656a12; }
.intro-tag-a { top: 10%; left: 3%; rotate: -7deg; background: repeating-linear-gradient(90deg,#e0ebef70 0 12px,#abc6d230 12px 24px),#dfe8e8; }.intro-tag-b { right: 3%; bottom: 11%; rotate: 5deg; background: #e8ddcb; font-size: 18px; }
.intro-tag-a { animation:intro-note-float 6.8s ease-in-out infinite; transform-origin:30% 50%; }
.intro-tag-b { animation:intro-note-float 8.2s ease-in-out -3.1s infinite reverse; transform-origin:70% 50%; }
@keyframes intro-note-float {
  0%,100% { transform:translate3d(0,2px,0) rotate(-.8deg); }
  50% { transform:translate3d(2px,-7px,0) rotate(1.1deg); }
}
.intro-instruction { font-size: 10px; text-align: center; margin: 15px 0 0; color: #819198; }.intro-instruction span { display: inline-block; margin-left: 16px; font: 8px 'DM Mono',monospace; letter-spacing: .1em; }
.intro-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5vw; align-items: center; padding: 8px 0 32px; }
.intro-label { display: block; font: 8px 'DM Mono',monospace; letter-spacing: .13em; color: #83949a; }.intro-about p { font: 400 clamp(17px,1.6vw,25px)/1.7 'Noto Sans SC',sans-serif; margin: 15px 0 8px; letter-spacing: .05em; }.intro-about-en { font: italic 11px Georgia; color: #8a9594; }
.intro-playback { display: flex; gap: 16px; margin-top: 23px; }.intro-playback button { font-size: 9px!important; background: none; border: 0; padding: 4px 0; color: #6b808a; border-bottom: 1px solid #6b808a40; }
.intro-postcard { justify-self: center; width: min(290px,100%); position: relative; background: #faf9f1; padding: 9px 9px 0; border: 1px solid #fff; box-shadow: 2px 4px 4px #34566618,0 14px 25px #344f5915; rotate: -5deg; transition: rotate .5s,translate .5s; }
.intro-postcard::before { content: ''; position: absolute; z-index: 2; width: 85px; height: 25px; top: -10px; left: calc(50% - 42px); background: repeating-linear-gradient(120deg,#a4c9d4ad 0 7px,#f0f0dea8 7px 14px); rotate: 9deg; clip-path: polygon(3% 0,98% 2%,94% 20%,100% 42%,95% 67%,99% 100%,1% 97%,4% 70%,0 40%); }
.intro-postcard:hover { rotate: -1deg; translate: 0 -5px; }.intro-photo { display: block; aspect-ratio: 1.6; overflow: hidden; }.intro-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }.intro-postcard-caption { display: flex; justify-content: space-between; padding: 11px 3px; font: 21px 'Nanum Pen Script',cursive; }.intro-postcard-caption b { font-weight: 400; }
.intro-invitation { justify-self: end; }.intro-enter { background: none; border: 0; padding: 17px 0 14px; border-bottom: 1px solid #45617070; font-size: clamp(15px,1.6vw,24px)!important; display: flex; align-items: center; gap: 30px; }.intro-enter span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #7c9ca077; background: #dce7e5; transition: transform .4s; }.intro-enter:hover span { transform: rotate(45deg); }.intro-invitation p { color: #829196; font-size: 10px; margin-top: 14px; }
.intro-footer { border-top: 1px solid #37516025; display: flex; justify-content: space-between; padding: 17px 0 20px; color: #83949a; font: 8px 'DM Mono',monospace; letter-spacing: .12em; }
.intro-portal { position: fixed; z-index: 110; pointer-events: none; object-fit: cover; transform-origin: center; }
.intro.is-leaving .intro-hero { transition: opacity .45s, transform .8s; opacity: 0; transform: translateY(-35px); }.intro.is-leaving .intro-top,.intro.is-leaving .intro-about,.intro.is-leaving .intro-invitation,.intro.is-leaving .intro-footer { opacity: 0; transition: opacity .35s; }.intro.is-leaving .intro-postcard { visibility: hidden; }
.intro-return { position: fixed; left: 20px; bottom: 20px; z-index: 8; border: 1px solid #fff9; background: #f6f4e8c9; color: #425d6d; border-radius: 50px; padding: 9px 13px; font: 10px 'DM Mono',monospace; cursor: pointer; backdrop-filter: blur(8px); }.intro-return[hidden] { display: none; }
@media(min-width:1600px) { .intro { padding-inline: max(6vw,calc((100vw - 1500px)/2)); }.intro-hero { flex: 1; }.intro-title { font-size: 155px; } }
@media(max-height:700px) and (min-width:701px) { .intro-top { padding: 17px 0; }.intro-hero { min-height: 210px; padding: 15px 0; }.intro-title { font-size: min(9.7vw,125px); }.intro-greeting { font-size: 24px; }.intro-bottom { padding-bottom: 17px; }.intro-postcard { width: 220px; }.intro-about p { margin: 9px 0; font-size: 17px; }.intro-playback { margin-top: 12px; }.intro-footer { padding-block: 12px; }.intro-tag-a { top: 3%; }.intro-tag-b { bottom: 3%; } }
@media(max-width:700px) { .intro-top { gap: 12px; }.intro-top > p { display: none; }.intro-identity { font-size: 37px!important; }.intro-hero { min-height: 285px; padding: 32px 0; }.intro-greeting { font-size: 23px; }.intro-title { font-size: 10.4vw; }.intro-tag { font-size: 15px; }.intro-tag-a { top: 10px; left: 0; }.intro-tag-b { bottom: 13px; right: 0; font-size: 14px; }.intro-instruction span { display: none; }.intro-bottom { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-bottom: 25px; }.intro-label { font-size: 7px; }.intro-about p { font-size: 16px; }.intro-about-en { font-size: 9px; }.intro-postcard-caption { font-size: 16px; }.intro-playback { gap: 10px; }.intro-playback button { font-size: 8px!important; }.intro-invitation { grid-column: 1/-1; justify-self: center; text-align: center; }.intro-enter { font-size: 19px!important; padding: 6px 0; }.intro-invitation > .intro-label { display: none; }.intro-invitation p { margin: 10px 0 0; }.intro-footer { font-size: 6px; }.intro-footer span:nth-child(2) { display: none; } }
@media(prefers-reduced-motion:reduce) { .intro * { transition: none!important; animation: none!important; } }
@media(min-width:1600px) { .intro-title { font-size:min(8.3vw,142px); } }
@media(max-height:700px) and (min-width:701px) { .intro-title { font-size:min(8.3vw,125px); margin:12px 0; } }
@media(max-width:700px) { .intro-title { font-size:15vw; margin:12px 0; } #intro-letters { flex-direction:column; gap:0; } .intro-title-line { height:1.3em; } .intro-instruction { max-width:85%; margin-inline:auto; line-height:1.7; } }