/* A dedicated visual stage; readable over the room, without a blocking modal. */
#first-steps{position:fixed;inset:0;z-index:7;pointer-events:none;color:#304531;--lesson-paper:248,245,233;--lesson-key:clamp(94px,6.2vw,142px);--lesson-gap:clamp(15px,1vw,23px)}
#first-steps[hidden],#first-steps [hidden]{display:none!important}
#intro-key-stage{position:absolute;left:40%;top:43%;width:clamp(440px,32vw,660px);transform:translate(-50%,-50%);text-align:center;isolation:isolate}
/* Feathered paper spotlight: no backdrop-filter/GPU rectangular blur tiles. */
#intro-key-stage::before{content:'';position:absolute;z-index:-1;inset:-55px -14px;pointer-events:none;background:radial-gradient(ellipse closest-side at 50% 45%,rgba(var(--lesson-paper),.98) 0%,rgba(var(--lesson-paper),.95) 46%,rgba(var(--lesson-paper),.75) 65%,rgba(var(--lesson-paper),.20) 85%,rgba(var(--lesson-paper),0) 100%);transition:opacity .45s}
#first-steps:not([data-step=move]) #intro-key-stage::before{opacity:0}
.intro-key-copy{position:relative;margin-bottom:28px}
.intro-eyebrow{display:inline-flex;align-items:center;gap:10px;font:11px/1.5 Arial,'Microsoft JhengHei',sans-serif;letter-spacing:2px;color:#627453}
.intro-eyebrow i{display:block;width:6px;height:6px;border-radius:50%;background:#789160;box-shadow:0 0 0 4px #80986a15}
.intro-key-copy h2{font:600 clamp(31px,2.35vw,46px)/1.35 'Noto Serif TC','PMingLiU',serif;letter-spacing:4px;margin:12px 0 11px;color:#304531;text-shadow:0 1px 0 #ffffef}
.intro-key-copy p{font:clamp(14px,1vw,18px)/1.8 'Microsoft JhengHei',sans-serif;letter-spacing:1.3px;margin:0;color:#536449}
.intro-key-perspective{position:relative;width:max-content;margin:auto;perspective:1100px}
.intro-key-perspective::after{content:'';position:absolute;z-index:-1;left:-15%;right:-15%;height:50px;bottom:-39px;background:radial-gradient(ellipse,#4c573926,transparent 68%);pointer-events:none}
#intro-keys{display:grid;grid-template-columns:repeat(3,var(--lesson-key));grid-template-rows:repeat(2,calc(var(--lesson-key)*.88));gap:var(--lesson-gap);transform:rotateX(16deg) rotateY(-10deg);transform-style:preserve-3d;pointer-events:auto}
#intro-keys button{position:relative;display:grid;place-items:center;padding:0 0 5px;border:1px solid #fefdf0;border-radius:clamp(17px,1.25vw,25px);background:linear-gradient(145deg,#fffef7 6%,#f7f5e7 56%,#e8ebd9);background-clip:padding-box;box-shadow:0 2px 0 #e5e7d3,0 10px 0 #aab799,0 13px 0 #849474,0 17px 0 -1px #758468,0 23px 23px #39472e30,inset 0 0 0 4px #ffffff70,inset 0 -5px 9px #78846d0b;color:#3b4d32;font:500 clamp(35px,2.7vw,52px)/1 'Trebuchet MS',Arial,sans-serif;touch-action:none;user-select:none;transition:translate .11s,box-shadow .11s,background .16s,color .16s}
#intro-keys button:first-child{grid-column:2}#intro-keys button:nth-child(2){grid-column:1;grid-row:2}#intro-keys button:nth-child(3){grid-column:2;grid-row:2}#intro-keys button:nth-child(4){grid-column:3;grid-row:2}
#intro-keys button small{position:absolute;right:13px;bottom:10px;font:14px/1 Arial,sans-serif;color:#889479}
#intro-keys button:hover{background:linear-gradient(145deg,#fffef9,#edf1df);color:#223d27}
#intro-keys button[data-pressed=true],#intro-keys button:active{translate:0 12px;background:linear-gradient(145deg,#b4c8a4,#8da77d);color:#233c27;box-shadow:0 2px 0 #839671,0 5px 0 #718568,0 10px 13px #39482c22,inset 0 0 0 3px #deead14d,inset 0 3px 8px #52674620}
#intro-keys button[data-pressed=true] small{color:#3c5a36}
#intro-keys button:focus-visible{outline:3px solid #567c53;outline-offset:7px}



.intro-move-progress{width:132px;height:4px;margin:36px auto 0;background:#85957433;border-radius:6px;overflow:hidden}.intro-move-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#97ac7d,#567646);transform:scaleX(var(--walk-progress,0));transform-origin:left;transition:transform .12s}
#intro-coffee-task{position:absolute;left:calc(50% + 100px);top:15%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;padding:18px 29px 20px;border:1px solid #d3d9c2;border-radius:20px;background:#faf8ed;box-shadow:0 5px 0 #e4e6d7,0 13px 30px #4a563719;white-space:nowrap}
#intro-coffee-task>svg{width:46px;height:46px;padding:8px;border-radius:50%;background:#e7ecdb;fill:none;stroke:#677e4e;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;box-sizing:content-box}
#intro-coffee-task small{font:10px/1.5 Arial,'Microsoft JhengHei',sans-serif;letter-spacing:2px;color:#748062}#intro-coffee-task p{font:600 clamp(21px,1.5vw,28px)/1.4 'Noto Serif TC','PMingLiU',serif;letter-spacing:2px;margin:4px 0 6px}#intro-coffee-task div>span{font:12px/1.6 'Microsoft JhengHei',sans-serif;letter-spacing:.7px;color:#657557}
#intro-cup-marker{position:fixed;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 8px;border-radius:24px;border:1px solid #f6f1d2;background:#667850;color:#fffde8;box-shadow:0 3px 0 #43553b,0 6px 14px #4f472225;transform:translate(-50%,-100%);font:12px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:1px}
#intro-cup-marker::after{content:'';position:absolute;left:calc(50% - 4px);bottom:-8px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #43553b}
#intro-cup-marker svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.intro-tracker{position:absolute;bottom:30px;right:32px;display:flex;align-items:center;gap:13px;padding:9px 16px 9px 10px;border:1px solid #d4dac4;border-radius:40px;background:#faf8ee;box-shadow:0 4px 0 #e3e5d8,0 8px 25px #4a563710}
.intro-step-number{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#647b53;color:#fffdf0;font:italic 14px Georgia,serif}
.intro-step-label{font:12px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:1px;color:#4f6241}.intro-track{display:flex;gap:5px}.intro-track i{width:18px;height:4px;border-radius:4px;background:#d1d7c2}.intro-track i[data-complete=true]{background:#839b69}
#intro-skip{display:flex;align-items:center;gap:9px;min-height:32px;pointer-events:auto;border:0;border-left:1px solid #a3aa8c55;background:transparent;padding:5px 0 5px 15px;color:#627253;font:12px/1.5 'Microsoft JhengHei',sans-serif;letter-spacing:.7px}#intro-skip:hover{color:#243d29}#intro-skip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.intro-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#instructions.intro-docking #touch-pad{visibility:hidden}
#intro-keys.intro-flying{pointer-events:none}
/* A small sketchbook colophon, not a modal. Input remains with the room. */
#intro-complete{position:fixed;z-index:8;left:calc(50% - 208px);bottom:max(36px,env(safe-area-inset-bottom));width:416px;max-width:calc(100vw - 32px);box-sizing:border-box;display:flex;align-items:center;gap:20px;margin:0;padding:21px 28px;border:1px solid #c9ceba;border-radius:5px 20px 20px 5px;background:linear-gradient(105deg,#faf8ef,#f3f1e5);box-shadow:0 3px 0 #e2e1d3,0 12px 30px #3a45251a;color:#374a34;pointer-events:none}
#intro-complete[hidden]{display:none!important}
#intro-complete::before{content:'';position:absolute;inset:9px auto 9px 7px;border-left:1px solid #b4bd9d}
.intro-complete-compass{width:43px;height:43px;flex:none;fill:none;stroke:#7a8868;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.intro-complete-copy{position:relative;padding-left:19px;border-left:1px solid #d1d5c0}
.intro-complete-kicker{font:9px/1.5 Georgia,serif;letter-spacing:2px;color:#7a866b}
#intro-complete h2{margin:5px 0 7px;font:500 23px/1.35 'Noto Serif TC','PMingLiU',serif;letter-spacing:2px;color:inherit}
#intro-complete p{margin:0;font:11px/1.6 'Microsoft JhengHei',sans-serif;letter-spacing:.65px;color:#7b816e}
.intro-complete-cat{position:absolute;width:82px;height:46px;right:24px;top:-40px;color:#667553;pointer-events:none}
#intro-complete .guide-sleeping-cat{width:100%;height:100%;right:0;bottom:0}
body[data-theme=night] #intro-complete{background:linear-gradient(105deg,#2b3a30,#26332c);color:#f0f0db;border-color:#6c7c61;box-shadow:0 3px 0 #1c2d22,0 12px 30px #0002}
body[data-theme=night] #intro-complete p,body[data-theme=night] .intro-complete-kicker,body[data-theme=night] .intro-complete-cat,body[data-theme=night] .intro-complete-compass{color:#bdcbaa;stroke:currentColor}
@media(max-width:600px){#intro-complete{left:16px;bottom:max(24px,env(safe-area-inset-bottom));width:calc(100vw - 32px);padding:17px 20px;gap:15px}.intro-complete-copy{padding-left:14px}#intro-complete h2{font-size:21px;letter-spacing:1px}.intro-complete-compass{width:34px;height:34px}}
body[data-theme=night] #first-steps{--lesson-paper:38,52,41;color:#edf0dc}body[data-theme=night] .intro-key-copy h2{color:#f4f3df;text-shadow:none}body[data-theme=night] .intro-key-copy p,body[data-theme=night] .intro-eyebrow{color:#c5d0b0}body[data-theme=night] #intro-coffee-task,body[data-theme=night] .intro-tracker{background:#293a2f;color:#f4f1e2;border-color:#728366;box-shadow:0 4px 0 #1c2d22,0 10px 28px #0002}body[data-theme=night] #intro-skip,body[data-theme=night] .intro-step-label,body[data-theme=night] #intro-coffee-task div>span{color:#d2dbc0}
/* Portrait: the lesson sits below the avatar, away from the audio controls. */
@media(max-width:900px){
 #first-steps{--lesson-key:64px;--lesson-gap:12px}
 #intro-key-stage{left:50%;top:auto;bottom:86px;width:min(350px,calc(100vw - 24px));transform:translateX(-50%)}
 #intro-key-stage::before{inset:-55px -70px;background:radial-gradient(ellipse,rgba(var(--lesson-paper),.98) 15%,rgba(var(--lesson-paper),.9) 42%,rgba(var(--lesson-paper),.2) 67%,transparent 78%)}
 .intro-key-copy{margin-bottom:18px}.intro-key-copy h2{font-size:26px;letter-spacing:2px;margin:0 0 5px}.intro-key-copy p{font-size:12px;letter-spacing:.5px}.intro-eyebrow{display:none}
 #intro-keys button{font-size:28px;border-radius:14px;box-shadow:0 2px 0 #e0e5ce,0 7px 0 #aab799,0 10px 0 #829471,0 16px 17px #39472c30,inset 0 0 0 3px #ffffff70}#intro-keys button small{font-size:11px;right:8px;bottom:6px}
 #intro-keys button[data-pressed=true],#intro-keys button:active{translate:0 7px;box-shadow:0 2px 0 #718568,0 7px 11px #39482c22,inset 0 0 0 2px #deead14d}
 .intro-move-progress{width:105px;height:3px;margin:27px auto 0}
 #intro-coffee-task{left:50%;top:26%;gap:13px;padding:13px 19px;border-radius:15px}#intro-coffee-task>svg{width:30px;height:30px}#intro-coffee-task p{font-size:20px}#intro-coffee-task small{font-size:9px}#intro-coffee-task div>span{font-size:11px}
 .intro-tracker{bottom:18px;right:16px;gap:10px;padding:7px 12px 7px 8px}.intro-step-number{width:28px;height:28px;font-size:13px}.intro-step-label{font-size:11px}.intro-track i{width:13px;height:3px}#intro-skip{font-size:11px;padding-left:12px}
}
@media(max-width:900px) and (min-aspect-ratio:1/1){#intro-key-stage{left:32%;top:50%;bottom:auto;transform:translate(-50%,-50%)}#intro-coffee-task{top:18%}}
@media(max-width:600px) and (max-height:740px){#first-steps{--lesson-key:51px;--lesson-gap:11px}#intro-key-stage{bottom:81px}.intro-key-copy{margin-bottom:12px}.intro-key-copy h2{font-size:23px}.intro-key-copy p{font-size:11px}#intro-keys button{font-size:25px}}
@media(min-width:901px) and (max-height:700px){#first-steps{--lesson-key:75px;--lesson-gap:14px}#intro-key-stage{top:46%;width:380px}.intro-key-copy{margin-bottom:18px}.intro-key-copy h2{font-size:29px}.intro-key-copy p{font-size:12px}#intro-keys button{font-size:31px}}
@media(prefers-reduced-motion:reduce){#first-steps *,#first-steps *::before,#first-steps *::after{transition:none!important;animation:none!important}#intro-keys{transform:none}}