*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f7f5fc;color:#3c3554;font-family:Kingdom,'Microsoft JhengHei','PingFang TC',sans-serif;font-size:16px;line-height:1.7;background-image:radial-gradient(#cabfde55 1px,transparent 1px);background-size:24px 24px}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button,a,input{ -webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #a08bc9;outline-offset:4px}[hidden]{display:none!important}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.4}img{max-width:100%;display:block}svg{display:block}.site-header{height:86px;max-width:1280px;padding:12px 32px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;font-size:20px;line-height:1.35;font-weight:700;padding:0}.brand small{display:block;font-size:10px;color:#8b80a1;letter-spacing:3px;font-weight:400;margin-top:5px}.brand-mark{background:#ede5fa;color:#9070ba;width:45px;height:48px;display:grid;place-items:center;font-size:29px;clip-path:polygon(25% 0,75% 0,100% 40%,50% 100%,0 40%)}.header-actions{display:flex;gap:12px;align-items:center}.icon-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;border:1px solid #ded6eb;border-radius:14px;background:#ffffffc9;padding:8px 13px;font-size:13px;font-weight:600}.icon-button:hover{background:#f0e8fc}.icon-button>span:first-child{font-size:20px}.audio-wrap{position:relative}.audio-menu{position:absolute;right:0;top:54px;z-index:40;width:290px;background:#fff;box-shadow:0 12px 35px #41315425;border:1px solid #e6def1;border-radius:18px;padding:20px}.audio-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.small-button{border:1px solid #d4c4ed;background:#f2ecfc;border-radius:9px;padding:7px 10px;font-size:13px;min-height:40px}.audio-menu label{display:flex;justify-content:space-between;font-size:13px}.audio-menu p{font-size:11px;color:#8b819d;margin-top:8px}.audio-menu input{width:100%;accent-color:#8c70b6;margin-top:10px}main{max-width:1280px;margin:0 auto;padding:0 32px 28px;min-height:calc(100dvh - 86px)}.hero{position:relative;min-height:600px;height:calc(100dvh - 117px);max-height:850px;border-radius:32px;overflow:hidden;box-shadow:0 12px 45px #72608f1c;background:#b3b7f0;border:5px solid white}.hero-art{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center bottom;inset:0}.hero-copy{position:relative;z-index:1;text-align:center;padding-top:5.5%;display:flex;flex-direction:column;align-items:center}.eyebrow{color:#7f6d9b;font-size:11px;letter-spacing:3px;font-weight:600;text-transform:uppercase}.hero .eyebrow{color:#57518b;background:#ffffffa6;padding:5px 15px;border-radius:20px;letter-spacing:2px;backdrop-filter:blur(5px);font-size:10px}.hero h1{font-size:clamp(42px,5.4vw,76px);font-weight:800;letter-spacing:7px;color:#493e79;text-shadow:0 2px 0 #ffffffb3;margin:12px 0 0}.hero h2{font-size:clamp(19px,2vw,27px);color:#5f548c;letter-spacing:6px;margin-top:3px}.hero .tagline{margin-top:16px;color:#5d5482;font-size:13px}.button{border:1px solid #6b5298;border-bottom:4px solid #604585;background:#8c70b6;color:white;border-radius:15px;min-height:51px;padding:11px 26px;font-weight:600;display:inline-flex;gap:10px;align-items:center;justify-content:center;transition:transform .15s,background .15s;text-decoration:none;letter-spacing:.5px}.button:hover:not(:disabled){background:#7d61a8;transform:translateY(-2px)}.button:active:not(:disabled){transform:translateY(1px)}.button:disabled{opacity:.5}.button.secondary{color:#76608d;border:1px solid #dfd4eb;border-bottom:3px solid #d6c7e6;background:white}.button.ghost{color:#7e6b97;background:transparent;border:1px solid #d9cee8;border-bottom-width:1px;font-weight:400}.start-button{min-width:205px;margin-top:25px;letter-spacing:4px;font-size:23px;padding:13px 34px;background:#8061ab;box-shadow:0 5px 15px #66538920}.hero .resume-note{font-size:11px;color:#655786;margin-top:9px;background:#ffffffe0;border-radius:20px;padding:3px 12px}.hero .hero-footer{position:absolute;bottom:18px;left:0;right:0;display:flex;gap:10px;justify-content:center;color:#6f5d91;z-index:1;font-size:10px}.hero-footer span{background:#ffffffd9;padding:5px 12px;border-radius:20px}.page-top{display:flex;justify-content:space-between;align-items:center;margin:12px 0 22px;gap:20px}.page-top h1{font-size:30px;margin-top:4px}.subtle{color:#8b809a;font-size:13px}.gem-count{padding:7px 15px;border:1px solid #ded4ed;border-radius:20px;background:#fff;font-size:12px;white-space:nowrap}.gem-count b{color:#8568ad}.mission{display:grid;grid-template-columns:1.12fr 1fr;min-height:540px;overflow:hidden;border:1px solid #e0d7ed;background:#fff;border-radius:26px;box-shadow:0 8px 30px #5a477b0c}.mission-visual{position:relative;min-height:440px;overflow:hidden}.mission-visual img{height:100%;width:100%;object-fit:cover;object-position:center bottom}.mission-number{position:absolute;top:23px;left:23px;width:52px;height:52px;display:grid;place-items:center;background:#fff9;border:1px solid white;border-radius:16px;backdrop-filter:blur(8px);color:#705589;font-weight:700;font-size:20px}.mission-copy{padding:55px 43px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.mission-copy h1{font-size:35px;margin-top:10px}.mission-copy .story{font-size:16px;line-height:2;color:#7b6e8b;margin:21px 0 26px}.mission-goal{background:#f5f0fc;border:1px solid #e8def4;border-radius:12px;font-size:13px;padding:13px 16px;margin-bottom:28px;color:#7a609d;display:flex;gap:10px}.mission-copy .subtle{margin-top:11px;font-size:11px}.route-dots{display:flex;gap:7px;align-items:center}.route-dots span{width:8px;height:8px;background:#ded5e9;transform:rotate(45deg);border-radius:2px}.route-dots span.done{background:#b69acb}.route-dots span.current{background:#795aa5;box-shadow:0 0 0 4px #e6d9f2}.question-layout{max-width:1000px;margin:0 auto}.question-top{display:flex;justify-content:space-between;align-items:center;padding:12px 0 15px;gap:12px}.back-link{border:0;background:none;color:#8a789c;padding:8px 0;font-size:12px;min-height:40px}.question-top .q-counter{font-size:12px;color:#7b688d;white-space:nowrap}.progress-track{height:5px;background:#e7dfef;border-radius:10px;overflow:hidden;margin-bottom:23px}.progress-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#cfb0dd,#9c87c1);transition:width .3s}.question-card{background:#fff;border:1px solid #e3dced;border-radius:25px;padding:30px 36px;box-shadow:0 8px 30px #6d528408}.question-card h1{font-size:23px;margin:8px 0 24px;line-height:1.7}.question-card .eyebrow{font-size:10px}.notation-box{position:relative;background:#fcfcff;border:1px solid #e9e4f0;border-radius:15px;margin-bottom:8px;overflow:hidden}.score-scroll{overflow-x:auto;overscroll-behavior:contain;padding:14px 8px 3px;scrollbar-color:#c4b5d6 #f5f1fb;scrollbar-width:thin}.score-scroll>.score-svg{width:100%;min-width:610px;max-height:190px}.notation-box.short-score .score-svg{min-width:260px;max-width:400px;margin:0 auto}.notation-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.notation-tools p{font-size:10px;color:#a095b1}.zoom-button{border:0;background:#f2ecfa;color:#87709d;border-radius:7px;padding:5px 10px;font-size:11px;min-height:35px}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0}.option{display:flex;align-items:center;gap:13px;text-align:left;background:#fff;border:1.5px solid #e4dcec;border-radius:14px;padding:15px 18px;min-height:65px;font-size:16px;position:relative;transition:all .15s}.option:hover:not(:disabled){background:#faf7ff;border-color:#bfa5d8}.option .option-letter{height:28px;width:28px;flex-shrink:0;display:grid;place-items:center;background:#f4effa;border-radius:9px;color:#9a87b0;font-size:12px;font-family:Kingdom,sans-serif}.option.selected{background:#f4edfd;border-color:#9d7bc4;box-shadow:0 0 0 2px #e8ddf4}.option.selected .option-letter{color:white;background:#9c7dc1}.option.correct{background:#f0faf4;border-color:#80b599}.option.correct .option-letter{background:#80b599;color:white}.option:disabled{opacity:1}.option.key-choice{padding:12px 15px;min-height:145px;align-items:flex-start}.key-choice>.score-svg{width:100%;height:110px;flex:1;max-width:220px}.option.clef-choice{min-height:100px;padding:8px 15px}.clef-choice .score-svg{width:100px;height:95px}.clef-choice .choice-name{font-size:14px}.actions-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px}.hint-button{border:0;background:transparent;color:#9a7fae;min-height:45px;padding:8px 0;font-size:13px}.hint-button:disabled{opacity:.5}.feedback{padding:18px 20px;border-radius:14px;margin:18px 0 0;animation:fadeIn .25s}.feedback h2{font-size:17px;margin-bottom:5px}.feedback p{font-size:13px;line-height:1.95}.feedback.correct{background:#eff8f1;color:#4e7e63;border:1px solid #d6eadd}.feedback.wrong{background:#fff6eb;color:#a77b52;border:1px solid #f3e0ca}.feedback.hint{background:#f8f4fe;color:#8b73a4;border:1px solid #e9dff7}.feedback .hint2{margin-top:6px;padding-top:7px;border-top:1px solid #e3d8ee}.demo-button{border:1px solid #b6d2bf;background:#fff9;color:#5f8d71;border-radius:8px;padding:7px 12px;font-size:11px;margin-top:12px;min-height:36px}.question-footer{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:19px;color:#9a8caa;font-size:10px}.question-footer img{width:35px;height:35px;object-fit:contain}.map-layout{max-width:1070px;margin:0 auto}.map-intro{border-radius:22px;background:linear-gradient(120deg,#ece7fc,#eaf3f8);border:1px solid #dfd8ed;padding:24px 30px;display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:24px}.map-intro h2{font-size:19px;margin-bottom:4px}.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.map-card{padding:0;overflow:hidden;border:1px solid #e1d8ed;border-radius:19px;background:white;text-align:left;transition:transform .15s;position:relative}.map-card:hover:not(:disabled){transform:translateY(-4px)}.map-card:disabled{filter:saturate(.25);opacity:.6}.map-card img{width:100%;height:134px;object-fit:cover;object-position:center bottom}.map-card-body{padding:16px 18px}.map-card-body h2{font-size:17px;margin:6px 0}.map-meta{display:flex;justify-content:space-between;font-size:10px;color:#9784aa}.map-card .tag{position:absolute;right:11px;top:10px;background:#ffffffdf;padding:4px 9px;border-radius:8px;font-size:10px;color:#8b73a2}.map-card.complete .tag{background:#edf9f0;color:#668c6f}.map-card.current{border:2px solid #b49acc}.level-diamond{display:inline-block;width:12px;height:12px;border:1px solid #c1aed6;transform:rotate(45deg);background:#f4eefa;border-radius:2px}.level-diamond.done{background:#bf9fd8;border-color:#a98ac0}.celebration{max-width:760px;margin:16px auto;text-align:center;background:white;border:1px solid #e3daed;border-radius:27px;padding:20px 35px 35px;position:relative;overflow:hidden}.celebration .celebration-art{height:270px;width:330px;object-fit:contain;margin:0 auto 4px;animation:bounceIn .9s both}.celebration h1{font-size:30px;margin:8px 0 10px}.celebration .story{font-size:14px;color:#8c789d}.level-stars{font-size:22px;color:#c7a26f;letter-spacing:3px;margin:17px 0}.celebration .button-row{justify-content:center;margin-top:20px}.button-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.collected-gems{display:flex;gap:13px;justify-content:center;margin:22px 0}.collected-gems i{width:14px;height:14px;transform:rotate(45deg);border-radius:3px;border:1px solid #d8c8e6;background:#f4edf9}.collected-gems i.done{background:linear-gradient(135deg,#d4baf1,#98b9e0);border-color:#b497d0;box-shadow:0 0 12px #d1b8eb}.finale{position:relative;min-height:600px;border:4px solid white;border-radius:29px;overflow:hidden;background:#e7e6fb}.finale>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}.finale-content{position:relative;z-index:1;text-align:center;padding:40px 20px;max-width:600px;margin:auto}.finale-content h1{font-size:39px;color:#58467e;text-shadow:0 2px white;margin:7px 0}.finale-content p{color:#7d6a9a;font-size:13px}.constellation{height:105px;width:280px;position:relative;margin:8px auto 13px}.constellation .constellation-line{position:absolute;inset:0;width:100%;height:100%;stroke:#c4ace0;stroke-width:1;fill:none;stroke-dasharray:3 4}.constellation .gem{position:absolute;width:18px;height:18px;background:linear-gradient(135deg,#fbf3ff,#c2b0eb,#90b6dc);border:1px solid #9c8abe;transform:rotate(45deg);border-radius:3px;box-shadow:0 0 15px #fff;animation:gemIn .5s both}.certificate-entry{background:#fffffff0;border:1px solid #ece1f5;border-radius:18px;max-width:480px;margin:18px auto 0;padding:19px 22px;box-shadow:0 7px 25px #8e73b320;backdrop-filter:blur(8px)}.certificate-entry h2{font-size:17px;color:#735b90;margin-bottom:11px}.name-row{display:flex;gap:8px;align-items:center}.name-row input{flex:1;min-width:0;border:1px solid #d8c9e9;border-radius:10px;padding:11px 13px;width:100%;background:#fff;color:#58406d;font-size:14px;min-height:48px}.name-row button{min-width:115px;white-space:nowrap;padding:9px 13px;font-size:13px}.certificate-entry .certificate-status{font-size:11px;margin-top:9px;color:#927ea7;min-height:19px}.finale-bottom{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:12px;z-index:1}.finale-bottom button{font-size:11px;min-height:37px;padding:6px 14px;backdrop-filter:blur(5px);background:#ffffffda}.notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60;padding:11px 20px;color:#fff;background:#735f8e;border-radius:12px;max-width:calc(100% - 30px);font-size:12px;box-shadow:0 3px 20px #39274630}dialog{border:1px solid #dfd1ee;border-radius:22px;box-shadow:0 20px 80px #34234540;color:#5d4a73;background:#fff;padding:25px;max-width:calc(100vw - 24px)}dialog::backdrop{background:#31233c77;backdrop-filter:blur(5px)}.score-dialog{width:1100px}.dialog-head{display:flex;align-items:center;justify-content:space-between}.score-dialog p{font-size:12px;color:#9a88aa;margin:12px 0}.zoom-score{overflow:auto;padding:35px 0;background:#fdfcff;border-radius:10px}.zoom-score svg{min-width:1000px;width:100%;min-height:240px}.zoom-score svg:has(+svg){margin-bottom:20px}.reset-dialog{max-width:430px}.reset-dialog h2{font-size:23px;margin-bottom:15px}.reset-dialog p{font-size:14px;color:#8a789a;margin-bottom:25px}.confetti{position:absolute;top:-20px;pointer-events:none;width:7px;height:12px;opacity:0;animation:confetti 1.5s ease-out both;background:#c8a9e6}.decor-star{position:absolute;color:#cfb8e4;pointer-events:none;animation:twinkle 2s infinite alternate}.footer-note{text-align:center;font-size:10px;color:#aa9bb8;padding-top:18px}@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)}}@keyframes gemIn{from{opacity:0;scale:.2}to{opacity:1;scale:1}}@keyframes confetti{0%{opacity:0;transform:translateY(-10px) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translateY(480px) rotate(300deg)}}@keyframes twinkle{from{opacity:.3;scale:.8}to{opacity:1;scale:1.1}}@media(min-width:1100px){.option.key-choice{justify-content:center}.key-choice>.score-svg{max-width:210px}.option.clef-choice{justify-content:center}}
@media(max-width:760px){.site-header{height:75px;padding:10px 17px}.brand{font-size:17px;gap:9px}.brand-mark{width:34px;height:39px;font-size:23px}.brand small{font-size:8px;letter-spacing:2px}.header-actions{gap:7px}.icon-button{padding:7px 10px;border-radius:12px}.desktop-only{display:none}main{padding:0 14px 22px;min-height:calc(100dvh - 75px)}.hero{min-height:610px;height:calc(100dvh - 95px);max-height:850px;border-radius:24px;border-width:3px;background:linear-gradient(#a7adee,#d1cdf2 56%,#ddd9f5)}.hero-art{top:auto;bottom:0;height:auto;max-height:67%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent 0%,black 21%)}.hero-copy{padding-top:50px}.hero h1{font-size:43px;letter-spacing:4px;margin-top:18px}.hero h2{font-size:19px;letter-spacing:4px}.hero .tagline{font-size:11px;margin-top:18px;padding:0 18px}.start-button{font-size:21px;margin-top:22px;min-width:190px}.hero .hero-footer{bottom:9px;gap:5px;font-size:8px}.hero-footer span{padding:3px 8px}.page-top{margin:6px 0 15px}.page-top h1{font-size:25px}.gem-count{padding:6px 10px;font-size:10px}.mission{display:flex;flex-direction:column;min-height:0;border-radius:21px}.mission-visual{min-height:0;height:235px;flex-shrink:0}.mission-visual img{object-fit:cover;object-position:center bottom}.mission-copy{padding:26px 24px 31px;align-items:flex-start}.mission-copy h1{font-size:28px;margin-top:8px}.mission-copy .story{font-size:14px;margin:15px 0 18px;line-height:1.95}.mission-goal{font-size:11px;padding:10px 12px;margin-bottom:22px}.mission-number{width:42px;height:42px;top:16px;left:16px;border-radius:12px;font-size:17px}.mission-copy .button{width:100%}.mission-copy .subtle{align-self:center}.question-top{padding:5px 1px 10px}.question-card{padding:23px 18px;border-radius:21px}.question-card h1{font-size:18px;line-height:1.8;margin:8px 0 18px}.question-card .eyebrow{font-size:9px;letter-spacing:2px}.progress-track{margin-bottom:15px}.options{gap:10px;margin:15px 0}.option{min-height:63px;font-size:13px;padding:11px 10px;gap:8px;border-radius:12px}.option .option-letter{width:23px;height:23px;font-size:10px;border-radius:7px}.option.key-choice{padding:9px 9px 8px;min-height:120px;gap:3px}.key-choice>.score-svg{height:90px;width:100%;min-width:0}.option.clef-choice{flex-direction:column;gap:0;align-items:center;padding:8px 6px 11px}.clef-choice .score-svg{height:78px;width:102px}.clef-choice .option-letter{position:absolute;left:9px;top:9px}.clef-choice .choice-name{font-size:12px}.actions-bar{margin-top:16px;gap:8px}.actions-bar .button{font-size:13px;padding:10px 18px;min-height:49px}.hint-button{font-size:11px}.notation-tools{margin-bottom:13px}.notation-tools p{font-size:8px}.notation-tools .zoom-button{font-size:10px}.score-scroll{padding-top:8px}.score-scroll>.score-svg{min-width:610px;max-height:150px}.notation-box.short-score .score-svg{min-width:230px;max-width:300px;max-height:155px}.feedback{padding:15px}.feedback h2{font-size:15px}.feedback p{font-size:12px}.question-footer{font-size:9px;margin-top:14px}.map-intro{padding:18px;align-items:flex-start;flex-direction:column}.map-intro h2{font-size:17px}.map-grid{grid-template-columns:repeat(2,1fr);gap:12px}.map-card img{height:103px}.map-card-body{padding:13px 12px}.map-card-body h2{font-size:14px}.map-meta{font-size:8px}.map-card .tag{font-size:8px;right:7px;top:7px}.map-card.current{border-width:1.5px}.celebration{margin:8px auto;padding:20px 20px 30px;border-radius:22px}.celebration .celebration-art{height:250px;width:280px}.celebration h1{font-size:25px}.celebration .story{font-size:12px}.celebration .button-row{flex-direction:column}.celebration .button-row button{width:100%}.level-stars{font-size:20px}.finale{min-height:690px;border-radius:23px;border-width:3px;background:linear-gradient(#b0bdf5,#c7ccf5 58%,#f4edf9)}.finale>img{height:auto;top:auto;bottom:0;mask-image:linear-gradient(to bottom,transparent,black 28%)}.finale-content{padding:25px 15px}.finale-content h1{font-size:28px}.finale-content p{font-size:11px}.constellation{height:88px;scale:.9;margin:8px auto 2px}.certificate-entry{padding:17px 14px;margin-top:13px}.certificate-entry h2{font-size:15px}.name-row{flex-direction:column}.name-row button{width:100%}.certificate-entry .certificate-status{font-size:10px}.finale-bottom{bottom:10px}.finale-bottom button{font-size:10px;padding:4px 10px}.score-dialog{padding:18px}.zoom-score{padding:20px 0}.audio-menu{width:270px}.footer-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}