.family-intro[hidden]{display:none}.family-intro{position:absolute;z-index:6;left:5%;right:5%;top:17%;padding:12px;border-radius:20px;background:#fff9f0f0;border:1px solid #ffc58d;color:#342a25;box-shadow:0 7px 24px #33221f30;text-align:center}.family-intro::after{content:'';position:absolute;bottom:-8px;left:var(--tail,15%);width:15px;height:15px;background:#fff9f0;border-right:1px solid #ffc58d;border-bottom:1px solid #ffc58d;transform:rotate(45deg);transition:left .25s}.family-intro small{font-size:8px;letter-spacing:1.5px;color:#a84023}.intro-speech strong{display:block;color:#bc2b22;font-size:15px;margin:5px 0}.intro-speech p{font-size:13px;line-height:1.45;min-height:58px;margin:5px 0 9px}.family-intro nav{display:flex;gap:5px;justify-content:center}.family-intro nav button{font-size:10px;min-height:30px;padding:5px 9px;border-radius:20px}.family-intro nav button[aria-pressed=true]{background:#c53025;border-color:#ffb35a}.family-intro .intro-next{margin-top:9px;width:100%;min-height:40px;padding:10px;font-size:13px;background:linear-gradient(130deg,#ed1725,#f87515);border-color:#ffb657;color:#fff}.scene[data-intro=open] .photo-toggle{visibility:hidden}@media(max-width:360px){.family-intro{top:15%;padding:9px}.intro-speech p{font-size:12px}.family-intro nav button{padding:5px 7px}}@media(prefers-reduced-motion:reduce){.family-intro::after{transition:none}}
.scene .intro-splash{display:grid;place-items:center;background:#080808!important;text-align:center;padding:24px}
.intro-splash-content{width:100%;color:#fff;filter:drop-shadow(0 8px 18px #0008)}
.scene .intro-splash-content img{position:static;display:block;width:90%;height:auto;max-height:240px;object-fit:contain;margin:0 auto 25px}
.intro-splash-content p{font:700 11px/1.5 Arial;letter-spacing:2.5px;color:#ffd579;margin:0 0 12px}
.intro-splash-content h2{font:900 clamp(28px,8vw,46px)/1.05 Arial;margin:0 0 14px;color:#fff;text-shadow:0 3px #9d1722}
.intro-splash-content span{font:500 13px/1.5 Arial;color:#f3ddce}
.scene .intro-splash[hidden]{display:none}
.scene .family-intro{top:10%;background:#fff9f0bf}
.scene .family-intro::after{background:#fff9f0bf}
.scene .family-intro{top:12%;left:5%;right:5%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.family-intro>small,.family-intro .intro-speech strong,.family-intro nav button[aria-pressed]{display:none}
.scene .family-intro::after{display:none}
.family-intro .intro-speech{position:relative;background:#fffaf0d6;border:3px solid #382620;border-radius:47% 44% 43% 39% / 30% 37% 35% 33%;padding:21px 19px;box-shadow:4px 5px 0 #3e211c65;min-height:132px;display:grid;place-items:center;transform-origin:var(--tail,15%) 100%}
.family-intro .intro-speech::after{content:'';position:absolute;left:var(--tail,15%);bottom:-23px;width:23px;height:29px;background:#fffaf0d6;clip-path:polygon(0 0,100% 0,15% 100%);filter:drop-shadow(2px 2px 0 #382620);pointer-events:none}
.family-intro .intro-speech p{font-size:14px;font-weight:600;line-height:1.45;min-height:0;margin:0;color:#30231e;text-wrap:pretty}
.family-intro nav{margin-top:30px;justify-content:flex-end}.family-intro nav button{min-height:28px;padding:4px 10px;background:#302724b0;font-size:10px}
.family-intro .intro-next{width:auto;min-width:155px;float:right;margin:7px 0 0;padding:9px 16px}
body:has(.family-intro:not([hidden])) .members{display:none}
@media(max-width:360px){.family-intro .intro-speech{padding:16px 13px}.family-intro .intro-speech p{font-size:12px}}
.scene .family-intro .intro-speech{display:block;min-height:0;padding:6px 12px;background:none;border:0;border-radius:0;box-shadow:none;line-height:1.9;text-align:center;filter:drop-shadow(1px 0 0 #382620) drop-shadow(-1px 0 0 #382620) drop-shadow(0 1px 0 #382620) drop-shadow(0 -1px 0 #382620) drop-shadow(2px 3px 1px #38262040)}
.scene .family-intro .intro-speech p{display:inline;background:#fffaf0d6;padding:5px 10px;border-radius:12px;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-size:14px;line-height:1.9;text-wrap:pretty}
.scene .family-intro .intro-speech::after{bottom:-16px;width:17px;height:23px;filter:none;left:clamp(35%,var(--tail,50%),65%)}
@media(max-width:360px){.scene .family-intro .intro-speech p{font-size:13px;padding:5px 8px}}
.scene .family-intro .intro-speech,.scene .family-intro .intro-speech p{line-height:1.6}
.scene .family-intro .intro-speech p{padding-top:6px;padding-bottom:6px}
.scene .family-intro .intro-speech{line-height:1.6}
.scene .family-intro .intro-speech p{line-height:1.6;padding-top:6px;padding-bottom:6px}
.scene .family-intro{inset:0;pointer-events:none}
.scene .family-intro .intro-speech{position:absolute;box-sizing:border-box}
.scene .family-intro .intro-speech::after{left:var(--tail);transform:translateX(-3px)}
.scene .family-intro nav{position:absolute;top:13%;right:5%;margin:0;pointer-events:auto}
.scene .family-intro .intro-next{position:absolute;top:20%;right:5%;margin:0;pointer-events:auto}
.controls .intro-next{min-height:52px;min-width:160px;padding:14px 24px;border-radius:30px;background:linear-gradient(130deg,#ed1725,#f87515);border:1px solid #ffc36c;color:#fff;font-size:16px;font-weight:700;box-shadow:0 3px 12px #f54b293d;touch-action:manipulation}
.controls .intro-next[hidden]{display:none}
.info>.eyebrow{display:block;text-align:center;line-height:1.5}
body:has(.family-intro:not([hidden])) .info>.lead{display:none}
@media(max-width:740px){
 body:has(.family-intro:not([hidden])) main{gap:9px}
 body:has(.family-intro:not([hidden])) .info{padding-bottom:12px}
 body:has(.family-intro:not([hidden])) .info>.eyebrow{font-size:10px;letter-spacing:1.2px;margin:0 0 7px}
 body:has(.family-intro:not([hidden])) .info .controls{position:relative;inset:auto;width:100%;margin:0;padding:0;gap:5px}
}
.intro-floor-lights{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.scene[data-intro=open]>.intro-floor-lights{visibility:visible}
.intro-floor-lights i{position:absolute;top:94%;height:3.4%;border-radius:50%;transform:translate(-50%,-50%);background:#d6ff22;box-shadow:0 0 9px 4px #c7ff36b0,0 0 24px 9px #bdff3870;opacity:0;transition:opacity .35s ease-out}
.intro-floor-lights i.lit{opacity:1}
@media(prefers-reduced-motion:reduce){.intro-floor-lights i{transition:none}}
.intro-effects{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 32px #e9323240;animation:intro-glow 2.8s ease-in-out infinite alternate}
.intro-effects>i{position:absolute;left:var(--x);top:-12px;width:5px;height:8px;background:var(--color);opacity:.65;animation:intro-fall var(--duration) linear var(--delay) infinite;animation-play-state:inherit}
.intro-beams{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;animation-play-state:inherit}
.intro-beams i{position:absolute;top:-12%;left:12%;width:58%;height:80%;transform-origin:50% 0;background:linear-gradient(180deg,#fff9cce6,#ffe28e55 55%,transparent 95%);clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);filter:blur(13px);opacity:.6;animation:intro-beam-sweep 5.7s ease-in-out infinite alternate;animation-play-state:inherit}
.intro-beams i:nth-child(2){left:52%;background:linear-gradient(180deg,#f4fff4dd,#bdff6459 55%,transparent 95%);animation-duration:7.1s;animation-delay:-3s}
.intro-beams i:nth-child(3){left:-24%;background:linear-gradient(180deg,#fff2f9dd,#ffacdc55 55%,transparent 95%);animation-duration:6.3s;animation-delay:-4s}
@keyframes intro-beam-sweep{from{transform:rotate(-34deg);opacity:.45}to{transform:rotate(36deg);opacity:.7}}
@media(prefers-reduced-motion:reduce){.intro-beams i{animation:none;opacity:.2}}
.controls .intro-next.intro-ready{position:relative;isolation:isolate;overflow:hidden;flex:1 1 100%;padding:14px 46px 14px 16px;font-size:clamp(14px,3.8vw,17px);line-height:1.3;background:linear-gradient(90deg,#9b1225b8,#9b1225b8),url('brand/pattern.webp') center/180px;color:#fff;text-shadow:0 1px 3px #570714;animation:intro-arrive .5s ease-out both;box-shadow:0 0 20px #ffad5266,inset 0 1px 0 #ffffff66}
.controls .intro-ready::before{content:'';position:absolute;right:14px;top:calc(50% - 16px);width:25px;height:30px;pointer-events:none;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 38'%3E%3Cg fill='none' stroke='%23d6ff22' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 23V16C3 0 29 0 29 16v7M7 29V16C7 5 25 5 25 16v12M11 33V17C11 10 21 10 21 17v15M15 35V18c0-2 2-2 2 0v18M3 28v3M29 28v3'/%3E%3C/g%3E%3C/svg%3E");filter:drop-shadow(0 0 3px #d6ff22) drop-shadow(0 0 7px #aaff00);animation:intro-fingerprint 1.5s ease-in-out infinite}
.controls .intro-ready::after{content:'👆';position:absolute;right:13px;top:50%;font-size:25px;line-height:1;pointer-events:none;animation:tap-hint 1.5s ease-in-out infinite;transform:translateY(-35%) rotate(-18deg)}
@keyframes intro-fingerprint{0%,100%{opacity:.25;transform:scale(.9)}45%,60%{opacity:1;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.controls .intro-ready::before{animation:none;opacity:.8}}
@media(prefers-reduced-motion:reduce){.controls .intro-ready::after{animation:none}}
@keyframes intro-glow{to{box-shadow:inset 0 0 48px #f7bd5c66}}
@keyframes intro-fall{to{transform:translate(20px,850px) rotate(300deg)}}
@keyframes intro-arrive{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-effects,.intro-effects i,.controls .intro-ready{animation:none}.intro-effects i{display:none}}
body:has(.family-intro:not([hidden])) .controls #start,
body:has(.family-intro:not([hidden])) .controls #pause{display:none}
@media(max-width:740px){.controls{bottom:max(10px,env(safe-area-inset-bottom))}.controls .intro-next{flex:1 1 65%;font-size:16px;min-height:52px}}
@media(max-width:740px){
 body:has(.family-intro:not([hidden])) .controls{bottom:max(3px,env(safe-area-inset-bottom));left:8px;right:8px;padding:3px;gap:4px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
 body:has(.family-intro:not([hidden])) .controls button:not(.intro-next){min-height:32px;padding:5px 8px;font-size:10px;border-radius:12px}
 body:has(.family-intro:not([hidden])) .controls .intro-next{min-height:44px;padding:10px 43px 10px 12px;font-size:14px;flex:1 1 100%;box-shadow:0 2px 10px #0004}
}
.scene .intro-splash-content{opacity:0;position:absolute;inset:0;box-sizing:border-box;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#161319df,#161319df),url('brand/pattern.webp') center/300px;filter:none}