@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#040a14;color:#fff;font-family:Outfit,'Noto Sans KR',sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #8dd8ff;outline-offset:3px}#viewport{position:fixed;inset:0;overflow:hidden}#stage{position:absolute;width:1600px;height:900px;transform-origin:top left;overflow:hidden;background:#06101f}.backdrop{position:absolute;inset:0;background:url('../assets/backgrounds/scene01.webp') center/100% 100% no-repeat;animation:reveal 1.6s ease both}.vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,9,24,.42),transparent 24%,transparent 43%,rgba(1,7,18,.38) 65%,rgba(1,8,20,.88) 100%),linear-gradient(90deg,rgba(1,9,22,.28),transparent 35%,transparent 65%,rgba(1,9,22,.25));pointer-events:none}.floor-glow{position:absolute;bottom:-280px;left:30%;width:700px;height:390px;border-radius:50%;background:#168cf8;filter:blur(110px);opacity:.23;pointer-events:none}.top{position:absolute;top:0;left:0;right:0;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 57px;background:linear-gradient(#03101cc9,transparent);z-index:3}.brand,.top-right{display:flex;align-items:center;gap:14px}.brand{font-size:17px;font-weight:700;letter-spacing:1.8px}.brand b{color:#75c8ff}.brand-dot{width:13px;height:13px;border:3px solid #72cfff;transform:rotate(45deg);box-shadow:0 0 17px #54a9ff}.brand-tag{font-size:9px;color:#8cabc4;letter-spacing:2px;border-left:1px solid #49617b;padding-left:15px}.top-right{font-size:11px;letter-spacing:1.4px;color:#b2d1ea}.online{display:flex;gap:8px;align-items:center}.online i,.tiny-pulse,.makey-tag i{width:6px;height:6px;background:#54f3bd;border-radius:50%;display:inline-block;box-shadow:0 0 12px #54f3bd}.scene-tag{border:1px solid #4c6a84;padding:10px 15px;border-radius:7px;background:#07192c8a}.scene-tag b{color:#8cd4ff}.icon-btn{color:#b5d9f4;border:1px solid #4c6a84;border-radius:7px;background:#07192c8a;padding:10px 12px}.icon-btn span{font-size:10px;color:#8bc5ed}.center-spark{position:absolute;top:43%;left:50%;width:4px;height:4px;border-radius:50%;box-shadow:0 0 110px 40px #3b98ff;opacity:.15;pointer-events:none}.bottom-left{position:absolute;bottom:65px;left:65px;z-index:2;width:570px;animation:rise .9s .2s both}.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:3px;color:#a2d8ff;font-weight:700}.line{width:24px;height:1px;background:#74bdf0}.headline{font-size:38px;line-height:1.38;font-weight:800;letter-spacing:-1.7px;margin:12px 0;text-shadow:0 3px 18px #000b}.headline em{font-style:normal;color:#86ceff}.subline{font-size:13px;color:#b8cfe3}.assistant{position:absolute;bottom:156px;right:70px;width:220px;height:240px;z-index:4;animation:float 4s ease-in-out infinite}.assistant img{position:absolute;width:218px;height:218px;object-fit:contain;filter:drop-shadow(0 15px 25px #010b20)}.makey-aura{position:absolute;left:42px;top:55px;width:130px;height:130px;border-radius:50%;background:#1a98ff;filter:blur(45px);opacity:.48}.makey-tag{position:absolute;bottom:0;left:33px;border:1px solid #5d9cc2;background:#06192ce8;padding:8px 14px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1.3px;white-space:nowrap}.makey-tag span{font-size:9px;color:#8aaeca;margin-left:5px}.console{position:absolute;right:303px;bottom:80px;width:560px;min-height:207px;background:linear-gradient(125deg,#071d34ed,#091c31f0);border:1px solid #5185aa99;border-radius:17px;z-index:5;box-shadow:0 22px 80px #0009,0 0 45px #1c85f21c;backdrop-filter:blur(15px);animation:rise .9s .4s both}.console:before{content:'';position:absolute;top:0;left:25px;width:120px;height:2px;background:#6ccaff;box-shadow:0 0 16px #6ccaff}.console-top,.console-foot{display:flex;justify-content:space-between;align-items:center;color:#93b9d7;font-size:10px;letter-spacing:1.4px}.console-top{padding:17px 22px;border-bottom:1px solid #32557388}.console-top>span:first-child{display:flex;align-items:center;gap:8px}.console-body{padding:17px 22px 15px}.intro-text{font-size:17px;font-weight:700;letter-spacing:-.3px}.intro-sub{font-size:12px;color:#a8c2d7;margin-top:8px}.primary{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(110deg,#1688ef,#38b7ff);border:1px solid #79d7ff;color:white;border-radius:9px;padding:13px 17px;font-size:13px;font-weight:800;box-shadow:0 8px 23px #007bdc44;transition:transform .18s,filter .18s}.primary:hover{transform:translateY(-2px);filter:brightness(1.14)}.primary span{font-size:18px}.console-body>.primary{width:100%;margin-top:17px}.console-foot{border-top:1px solid #32557388;padding:12px 22px}.steps{display:flex;gap:5px}.steps span{width:25px;height:3px;background:#34536b;border-radius:5px}.steps span.active{background:#74cfff;box-shadow:0 0 9px #74cfff}.guide{position:absolute;bottom:312px;right:300px;width:405px;padding:15px 17px;background:linear-gradient(130deg,#061b31f5,#102a43ed);border:1px solid #5785a8;border-radius:13px;z-index:5;box-shadow:0 16px 48px #0008;animation:rise .6s .5s both}.guide:after{content:'';position:absolute;right:55px;bottom:-9px;width:15px;height:15px;background:#0c253d;border-right:1px solid #5785a8;border-bottom:1px solid #5785a8;transform:rotate(45deg)}.guide-top{display:flex;align-items:center;gap:9px}.guide-icon{color:#70cbff}.guide-top strong{font-size:13px}.guide-top small{color:#82a7c3;font-size:10px}.guide-top button{margin-left:auto;border:0;background:transparent;color:#9fc4df;font-size:18px}.guide p{font-size:12px;line-height:1.9;color:#d6e8f5;margin:10px 0}.guide-actions{display:flex;align-items:center;justify-content:space-between}.guide-actions button{background:transparent;border:0;color:#80c9ff;padding:0;font-size:11px}.guide-actions span{font-size:9px;color:#6e9bbd;letter-spacing:1px}footer{position:absolute;bottom:21px;left:65px;right:65px;display:flex;justify-content:space-between;color:#7691a9;font-size:9px;letter-spacing:1.6px;z-index:3}footer b{color:#69bfff}#toast{position:absolute;top:95px;left:50%;transform:translateX(-50%) translateY(-15px);padding:12px 24px;border:1px solid #6bd3ff;background:#09283eee;border-radius:10px;color:#e5f8ff;font-size:13px;z-index:30;opacity:0;pointer-events:none;transition:.3s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.field-label{display:block;color:#9cc5e2;font-size:11px;margin-bottom:8px;letter-spacing:.5px}.name-row{display:flex;gap:10px}.name-row input{width:100%;min-width:0;background:#071427;border:1px solid #426a8c;border-radius:8px;color:white;padding:12px 14px;font-size:15px}.name-row input::placeholder{color:#6e8ba3}.name-row button{min-width:145px}.field-hint{color:#779bb7;font-size:10px;margin-top:9px}.modal{position:absolute;inset:0;background:#020a18bd;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(8px);animation:fade .35s both}.hidden{display:none!important}.modal-card{position:relative;width:390px;height:245px;border-radius:19px;background:radial-gradient(circle at 90% 0%,#2d91c6a1,transparent 55%),linear-gradient(130deg,#0b2541,#07192e 65%,#143d61);border:1px solid #6bb4e9;box-shadow:0 35px 90px #000b,0 0 45px #279bf955;padding:23px;animation:cardEnter .75s cubic-bezier(.2,1.3,.4,1) both;overflow:hidden}.modal-card:after{content:'';position:absolute;width:330px;height:330px;right:-170px;top:-140px;border:1px solid #6eb4e33d;border-radius:50%;box-shadow:0 0 0 45px #6eb4e312,0 0 0 100px #6eb4e309}.modal-head,.id-bottom{display:flex;justify-content:space-between;font-size:10px;color:#96cfff;letter-spacing:2px}.modal-head span:last-child{font-size:20px;color:#63f6c2}.id-brand{font-size:17px;font-weight:800;letter-spacing:1.5px;margin-top:13px}.id-brand span{color:#8ccfff;font-weight:500}.id-chip{position:absolute;right:29px;top:81px;font-size:31px;color:#c9e5fa}.id-avatar{display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid #65aee0;width:55px;height:55px;background:#134a78;margin-top:16px;font-size:22px;font-weight:800;color:#8bd3ff}.id-name{position:absolute;top:133px;left:93px;font-size:23px;font-weight:800}.id-role{position:absolute;top:166px;left:93px;font-size:9px;letter-spacing:1px;color:#94c6e6}.id-bottom{position:absolute;bottom:19px;left:23px;right:23px;padding-top:12px;border-top:1px solid #517b9b}.modal-caption{font-size:19px;font-weight:800;margin:26px 0 18px}.modal>.primary{min-width:390px}#scene2Notice{gap:14px;text-align:center}#scene2Notice h2{font-size:31px;margin:0}#scene2Notice p{font-size:15px;margin:0}#scene2Notice .muted{color:#a3bdd4}#scene2Notice small{color:#7a9ab3}.next-icon{width:90px;height:90px;display:grid;place-items:center;border:2px solid #64e9c6;border-radius:50%;font-size:48px;color:#64e9c6;box-shadow:0 0 55px #16cda35c}.next-actions{display:flex;gap:10px;margin-top:10px}.secondary{border:1px solid #5a89a9;background:#0b2740;color:#d5ebff;border-radius:9px;padding:12px 20px}.confetti-bit{position:absolute;top:-20px;width:8px;height:15px;z-index:25;pointer-events:none;animation:fall 2.3s linear forwards}@keyframes fall{to{transform:translateY(970px) rotate(900deg);opacity:0}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes reveal{from{filter:brightness(.3) blur(6px);transform:scale(1.06)}to{filter:brightness(1) blur(0);transform:scale(1)}}@keyframes cardEnter{from{opacity:0;transform:perspective(900px) rotateY(80deg) scale(.8)}to{opacity:1;transform:perspective(900px) rotateY(0) scale(1)}}@media (orientation:portrait) and (max-width:800px){#viewport{display:none}#rotate{display:flex!important}}#rotate{display:none;position:fixed;inset:0;background:radial-gradient(circle at center,#113758,#061121);z-index:100;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}#rotate .phone{border:3px solid #78cfff;border-radius:14px;width:64px;height:100px;display:grid;place-items:center;font-size:55px;transform:rotate(-35deg);box-shadow:0 0 40px #2087d950}#rotate h2{font-size:19px;margin:30px 0 8px}#rotate p{font-size:12px;color:#b0cce1}

.guide.collapsed p,.guide.collapsed .guide-actions{display:none}.guide.collapsed{width:230px}.guide.collapsed:after{display:none}

/* v3: Separate narration and background music switches. BGM stays at a constant volume. */
.top-right{gap:9px}.icon-btn{min-width:100px;font-size:11px;font-weight:800;letter-spacing:1px;transition:background .2s,border-color .2s}.icon-btn[aria-pressed="true"]{background:#12446acb;border-color:#70caff;color:#e5f8ff}.icon-btn[aria-pressed="false"]{opacity:.8}.icon-btn span{font-weight:700}.scene-tag{margin-right:3px}
/* White speech bubble above Makey, grouped visually with the mascot. */
.guide{right:43px;bottom:408px;width:325px;padding:17px 19px;background:#fff;color:#13283f;border:1px solid #c7e7ff;border-radius:17px;box-shadow:0 20px 55px #0009;z-index:6}
.guide:after{right:96px;bottom:-11px;width:19px;height:19px;background:#fff;border-right:1px solid #c7e7ff;border-bottom:1px solid #c7e7ff}
.guide-icon,.guide-actions button{color:#147bcb}.guide-top strong{color:#17354d}.guide-top small{color:#617e95}.guide-top button{color:#50728b}.guide p{color:#203449;font-size:13px;line-height:1.65;margin:10px 0}.guide-actions span{color:#6b8ba4}.guide.collapsed{width:230px}.guide.collapsed:after{display:block}

/* v5: readable speech bubble, larger training terminal, keep central branding clear */
.guide{width:405px;right:27px;bottom:430px;padding:22px 24px;border-radius:20px;box-shadow:0 18px 55px #0009}
.guide:after{right:114px}
.guide-top{gap:11px}.guide-top strong{font-size:18px;font-weight:800}.guide-top small{font-size:13px;font-weight:700;color:#54738c}.guide-icon{font-size:18px}
.guide p{font-size:17px;font-weight:600;line-height:1.72;color:#102b44;margin:14px 0 15px;word-break:keep-all}
.guide-actions button{font-size:13px;font-weight:700}.guide-actions span{font-size:10px;font-weight:700}
.guide.collapsed{width:270px}
.console{right:455px;width:610px;bottom:80px}
.console-top,.console-foot{font-size:12px;font-weight:700}.console-top{padding:19px 25px}.console-body{padding:22px 25px 20px}.console-foot{padding:15px 25px}
.field-label{font-size:14px;font-weight:700;margin-bottom:12px;color:#c3e4ff}
.name-row input{font-size:19px;padding:16px 17px}.name-row input::placeholder{color:#a3b9cb}
.name-row button{font-size:16px;min-width:162px}.field-hint{font-size:12px;line-height:1.6;margin-top:13px;color:#a9c7de}
.intro-text{font-size:20px}.intro-sub{font-size:14px}.primary{font-size:16px;padding:16px 20px}
.primary:disabled{opacity:.8;cursor:wait;transform:none}

/* v6: center access terminal horizontally, lower it approximately 2 cm on 1600x900 stage. */
.console{left:50%;right:auto;bottom:8px;animation:console-rise .9s .4s both}
@keyframes console-rise{from{opacity:0;transform:translate(-50%,26px)}to{opacity:1;transform:translate(-50%,0)}}

/* v7: playback-reactive meters */
.sound-meter{height:16px;display:inline-flex;align-items:center;gap:2px;vertical-align:middle;margin-right:5px}
.sound-meter i{width:3px;height:5px;border-radius:2px;background:#83d9ff;opacity:.55}
.sound-meter.active i{opacity:1;animation:meterBounce .64s ease-in-out infinite alternate}
.sound-meter.active i:nth-child(2){animation-delay:-.36s}.sound-meter.active i:nth-child(3){animation-delay:-.18s}.sound-meter.active i:nth-child(4){animation-delay:-.49s}
@keyframes meterBounce{from{height:3px}to{height:15px}}
@media(prefers-reduced-motion:reduce){.sound-meter.active i{animation:none;height:10px}}