#intro-container{width:100vw;height:100vh;position:relative;cursor:pointer;overflow:hidden;background:#0a0a0a}#skip-hint{position:absolute;top:16px;right:20px;color:hsla(0,0%,100%,.5);font-size:7px;z-index:100;letter-spacing:1px}#intro-scene{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:background .8s ease;position:relative}.scene-bg{position:absolute;inset:0;transition:opacity 1s}.intro-professor-wrap{display:flex;flex-direction:column;align-items:center;animation:introFloatUp .6s ease forwards;margin-bottom:20px}@keyframes introFloatUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.intro-professor-sprite{font-size:90px;filter:drop-shadow(0 0 20px rgba(255,200,50,.6));animation:introBob 2s ease-in-out infinite}@keyframes introBob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.intro-script-symbols{display:flex;gap:30px;margin-top:10px}.intro-sym{font-size:48px;opacity:0;animation:introPopIn .4s ease forwards;text-shadow:0 0 20px currentColor;font-family:serif}.intro-sym.h{color:#7ee8fa;animation-delay:.1s}.intro-sym.k{color:#f9ca74;animation-delay:.3s}.intro-sym.kj{color:#ff6b9d;animation-delay:.5s}@keyframes introPopIn{0%{opacity:0;transform:scale(.3) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.intro-scene-label{color:hsla(0,0%,100%,.3);font-size:7px;margin-top:8px;letter-spacing:3px;text-transform:uppercase}#intro-dialogue-box{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:90%;max-width:720px;background:rgba(10,10,20,.92);border:3px solid #7ee8fa;border-radius:6px;padding:18px 24px 14px;box-shadow:0 0 30px rgba(126,232,250,.3),inset 0 0 20px rgba(0,0,0,.5)}#intro-speaker-name{font-size:9px;color:#7ee8fa;margin-bottom:10px;letter-spacing:2px;text-transform:uppercase}#intro-dialogue-text{font-size:10px;color:#eee;line-height:1.8;min-height:40px}#intro-next-hint{text-align:right;color:#7ee8fa;font-size:10px;margin-top:8px;animation:introBlink 1s step-end infinite}@keyframes introBlink{0%,to{opacity:1}50%{opacity:0}}#intro-manabudex{width:100vw;height:100vh;background:#050510;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px;animation:introFadeIn 1s ease}@keyframes introFadeIn{0%{opacity:0}to{opacity:1}}.intro-dex-header{font-size:22px;color:#7ee8fa;text-shadow:0 0 20px #7ee8fa;letter-spacing:4px}.intro-dex-subtitle{font-size:8px;color:hsla(0,0%,100%,.5);letter-spacing:2px}.intro-dex-entries{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:10px}.intro-dex-entry{background:hsla(0,0%,100%,.04);border-radius:10px;padding:20px;width:200px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:introSlideUp .5s ease forwards;opacity:0}.intro-dex-entry.hiragana{border:2px solid #7ee8fa;animation-delay:.2s}.intro-dex-entry.katakana{border:2px solid #f9ca74;animation-delay:.5s}.intro-dex-entry.kanji{border:2px solid #ff6b9d;animation-delay:.8s}@keyframes introSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.intro-dex-num{font-size:8px;color:hsla(0,0%,100%,.3)}.intro-dex-char{font-size:52px;font-family:serif;line-height:1}.intro-dex-entry.hiragana .intro-dex-char{color:#7ee8fa;text-shadow:0 0 15px #7ee8fa}.intro-dex-entry.katakana .intro-dex-char{color:#f9ca74;text-shadow:0 0 15px #f9ca74}.intro-dex-entry.kanji .intro-dex-char{color:#ff6b9d;text-shadow:0 0 15px #ff6b9d}.intro-dex-info{font-size:7px;color:hsla(0,0%,100%,.7);text-align:center;line-height:1.8}.intro-tag{display:inline-block;padding:2px 6px;border-radius:3px;font-size:6px;margin-bottom:4px}.hiragana .intro-tag{background:rgba(126,232,250,.2);color:#7ee8fa}.katakana .intro-tag{background:hsla(39,92%,72%,.2);color:#f9ca74}.kanji .intro-tag{background:rgba(255,107,157,.2);color:#ff6b9d}.intro-dex-footer{font-size:8px;color:hsla(0,0%,100%,.4);margin-top:10px;letter-spacing:1px}