#introduction{width:min(680px,calc(100% - 24px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #d0b874;border-radius:24px;background:#fffaf0;color:#294d3b;overflow:auto}
#introduction::backdrop{background:#123b35bb;backdrop-filter:blur(5px)}
.intro-art{min-height:180px;background:linear-gradient(0deg,#fffaf0,transparent 70%),url('assets/scenery/garden-cinematic.webp') center 40%/cover;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:30px 20px 8px}
.intro-art img{width:75px;height:95px;object-fit:contain;filter:drop-shadow(0 0 20px #ffd369);animation:intro-lantern 3s ease-in-out infinite}
#intro-close{position:absolute;right:10px;top:10px;background:#fffaf0;color:#294d3b;width:44px;height:44px;padding:0;font-size:28px;border-radius:50%}
.intro-copy{padding:0 26px 22px}.intro-copy h1{font-size:clamp(27px,5vw,40px);line-height:1.15;margin:10px 0 20px}.intro-copy p{line-height:1.65}.intro-path{display:flex;gap:8px;justify-content:space-between;padding:14px 0;border-block:1px solid #d8dfbf;font-weight:700;font-size:14px}.intro-path span{flex:1;text-align:center}
.intro-actions{display:flex;gap:10px;flex-wrap:wrap;position:sticky;bottom:0;background:#fffaf0f5;padding:14px 20px;border-top:1px solid #e1d6b8}.intro-actions button{flex:1;min-width:130px;min-height:46px;margin:0}#intro-status{font-size:14px;min-height:1.4em}#intro-skip{display:block;margin:0 auto 12px;background:transparent;border:0;text-decoration:underline;color:#496152}
@keyframes intro-lantern{50%{filter:drop-shadow(0 0 30px #ffbe45);transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.intro-art img{animation:none}}.reduced .intro-art img{animation:none}

/* One clearly defined reading area; controls never participate in its scrolling. */
#introduction{height:min(840px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
#introduction[open]{display:flex;flex-direction:column}
.intro-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scroll-padding-top:12px}
.intro-controls{flex:0 0 auto;background:#fffaf0;border-top:1px solid #e1d6b8;padding-bottom:env(safe-area-inset-bottom,0px)}
.intro-actions{position:static;border:0;padding:12px 16px 6px;flex-wrap:nowrap}
.intro-actions button{min-width:0;padding:10px;font-size:15px}
#intro-close{z-index:2;box-shadow:0 2px 8px #294d3b33}
#intro-skip{margin:0 auto 4px;min-height:36px;padding:4px 12px;font-size:13px}
#intro-title:focus{outline:none}
@media(max-width:700px){
 .intro-art{min-height:105px;height:105px;padding:14px 20px 4px}
 .intro-art img{width:52px;height:65px}
 .intro-copy{padding:0 20px 14px}.intro-copy h1{font-size:28px;margin:8px 0 14px}
 .intro-copy p{font-size:15px;line-height:1.6}.intro-copy .eyebrow{font-size:10px}
 .intro-path{padding:10px 0}.intro-copy #intro-status{margin-bottom:0}
}