.guide-card{display:flex;gap:18px;align-items:center;border:1px solid #c9dcb5;background:linear-gradient(110deg,#eef5df,#fffdf4);padding:18px 22px;border-radius:20px;margin:20px 0;color:#223c35}
.guide-copy{flex:1;min-width:0}.guide-copy h3{margin:0 0 6px;font-size:20px}.guide-copy p{margin:0 0 12px;font-size:14px;line-height:1.5}.guide-actions{display:flex;gap:8px;flex-wrap:wrap}.guide-actions button,.guide-controls button{min-height:46px}.guide-card .guide-status{font-size:12px;margin-top:8px;margin-bottom:0;color:#53685a}
.lumi{width:92px;height:112px;flex:0 0 92px;position:relative;isolation:isolate;transform-origin:50% 90%;animation:lumi-wave 1.4s ease-in-out 1}
.lumi-body{position:absolute;inset:13px 9px 11px;border-radius:45% 45% 40% 40%;background:#398579;border:2px solid #276457;box-shadow:inset -8px -6px #2b7469}
.lumi-body:before,.lumi-body:after{content:'';position:absolute;width:21px;height:24px;background:#398579;border-radius:3px 90% 0 0;top:-9px;z-index:-1;transform:rotate(-18deg)}.lumi-body:before{left:0}.lumi-body:after{right:0;transform:scaleX(-1) rotate(-18deg)}
.lumi-face{position:absolute;top:14px;left:5px;right:5px;height:41px;background:#fff4cf;border-radius:42% 42% 50% 50%;display:flex;justify-content:space-evenly;align-items:center}
.lumi-eye{width:9px;height:12px;background:#233f3a;border-radius:50%;position:relative;animation:lumi-blink 6s 2}.lumi-eye:after{content:'';position:absolute;width:3px;height:3px;background:white;border-radius:50%;top:2px;right:1px}.lumi-beak{position:absolute;left:calc(50% - 6px);top:45px;width:12px;height:12px;transform:rotate(45deg);border-radius:2px;background:#df9a3c}
.lumi-belly{position:absolute;bottom:7px;left:17px;right:17px;height:25px;border-radius:50%;background:#a8cec0;display:grid;place-items:center;font-size:19px;color:#276457;font-weight:800}.lumi-wing{position:absolute;width:18px;height:39px;background:#2d7064;border:1px solid #276457;top:52px;border-radius:70%}.lumi-wing.left{left:1px;transform:rotate(14deg)}.lumi-wing.right{right:0;transform:rotate(-14deg)}.lumi-feet{position:absolute;bottom:9px;left:24px;width:15px;height:7px;border-radius:7px;background:#dfa24c;box-shadow:29px 0 #dfa24c}.lumi-shadow{position:absolute;left:15px;right:15px;height:7px;bottom:0;border-radius:50%;background:#214f3b18}
.lumi-speaking .lumi-beak{animation:lumi-talk .35s infinite alternate}.lumi-speaking .lumi-wing.right{animation:lumi-point 1.5s ease-in-out infinite alternate;transform-origin:50% 10%}
#guide-dialog{width:min(850px,calc(100vw - 30px));max-height:calc(100dvh - 30px);border:0;border-radius:24px;padding:0;background:#fbfcf6;color:#233e36;box-shadow:0 25px 80px #132e3850}#guide-dialog::backdrop{background:#142d36b8}#guide-dialog [hidden]{display:none!important}
.guide-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 24px;border-bottom:1px solid #dae4d2}.guide-header h2{font-size:21px;margin:0}.guide-header p{margin:3px 0 0;font-size:12px}.guide-header button{flex:none;min-height:44px;min-width:44px}
.guide-film{padding:22px 28px}.guide-frame{display:flex;gap:20px;align-items:center;min-height:270px;background:white;border:1px solid #d7e2ce;border-radius:18px;padding:20px}.guide-frame .lumi{transform:scale(1.15);margin:12px}.guide-board{flex:1;min-width:0}.guide-board h3{font-size:25px;line-height:1.2;margin:0 0 12px}.guide-caption{font-size:19px;line-height:1.6;min-height:80px;margin:0}.guide-illustration{margin-top:16px}.guide-illustration .lesson-figure{margin:10px 0}.guide-illustration .lesson-bar{height:32px}.guide-illustration .filled{animation:lumi-fill .8s both}.guide-illustration .lesson-line{margin:16px 12px 34px}.guide-step-pill{color:#526a49;font-size:11px;letter-spacing:.12em;font-weight:800;margin-bottom:10px}.guide-progress{display:flex;gap:8px;justify-content:center;margin:18px 0}.guide-progress button{width:44px;height:44px;border-radius:50%;background:white;border:1px solid #a9bd98;color:#375b40}.guide-progress [aria-current=step]{background:#245d49;color:white;border-color:#245d49}.guide-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.guide-preferences{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;align-items:center;margin:17px 0 10px;font-size:13px}.guide-preferences label{display:flex;gap:8px;align-items:center;min-height:44px}.guide-preferences select{padding:8px;border-radius:8px;border:1px solid #bacbab;background:white}.guide-note{font-size:12px;text-align:center;line-height:1.5;margin:12px 0 0;color:#556b58}.guide-film .guide-status{min-height:20px;text-align:center;font-size:13px;margin:10px 0}.guide-motion .guide-board{animation:lumi-arrive .3s ease-out}.guide-return{display:block;margin:16px auto 0}
@keyframes lumi-wave{0%,100%{rotate:0deg}40%{rotate:-6deg}70%{rotate:4deg}}@keyframes lumi-blink{0%,45%,49%,100%{scale:1 1}47%{scale:1 .1}}@keyframes lumi-talk{to{scale:1 .65}}@keyframes lumi-point{to{rotate:-35deg}}@keyframes lumi-fill{from{opacity:.15}to{opacity:1}}@keyframes lumi-arrive{from{opacity:.4;translate:8px 0}to{opacity:1;translate:0 0}}
@media(max-width:600px){.guide-card{padding:14px;gap:10px;align-items:flex-start}.guide-card .lumi{scale:.8;transform-origin:top left;flex-basis:70px;margin-right:-10px}.guide-actions{flex-direction:column}.guide-film{padding:14px}.guide-frame{padding:16px;gap:5px;align-items:flex-start;min-height:300px}.guide-frame>.lumi{display:none}.guide-caption{font-size:18px}.guide-board h3{font-size:22px}.guide-header{padding:14px}.guide-controls{gap:6px}.guide-controls button{font-size:13px;padding:9px 12px}}
@media(prefers-reduced-motion:reduce){.lumi,.lumi *,.guide-illustration .filled,.guide-motion .guide-board{animation:none!important;transition:none!important}}@media print{.guide-card,#guide-dialog{display:none!important}}