.avatar-canvas{object-fit:contain;display:block}.feedback-avatar{float:right;width:125px;height:222px;margin:0 0 10px 22px}#result:after{content:'';display:block;clear:both}
.standalone-tool>#toolbar,.standalone-tool>#viewport,.standalone-tool>#notes{display:none!important}#toolHome{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff7e9;text-align:center;padding:30px}#toolHome h1{font-size:44px;color:#81202b;margin:12px 0}#toolHome p{color:#846b54;font-size:18px}#toolHome nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:20px}#toolHome a{background:#842431;color:white;padding:18px 25px;border-radius:8px;text-decoration:none;font-size:20px}
.video-toggle{margin-top:10px;background:#8b2630;color:white;border-color:#8b2630}
.video-toggle:hover{background:#a03440}
#vrMarkers{position:absolute;inset:0;pointer-events:none}.vr-marker{position:absolute;transform:translate(-50%,-50%);display:flex;gap:9px;align-items:center;padding:7px 12px 7px 7px;background:#fff8eeed;color:#541c20;border:1px solid #e7c885;border-radius:40px;box-shadow:0 4px 18px #0005;white-space:nowrap;pointer-events:auto;font-size:16px}.vr-marker[hidden]{display:none}.vr-marker b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#8f242c;color:white;font-size:16px}.vr-marker:hover{background:white;outline:3px solid #eac680}.learning-open .vr-marker{opacity:.4}.learning-open .vr-marker:hover{opacity:1}
#vrProgress{position:absolute;left:28px;top:100px;z-index:2;font-size:14px;color:#fff4dc;padding:8px 12px;border-radius:5px;background:#251a13c7}
#galleryDialog .learning-nav{left:24px;right:24px;bottom:27px;max-width:none;display:flex;gap:6px;flex-wrap:nowrap;align-items:center;justify-content:center}#galleryDialog .learning-nav button{font-size:13px;padding:6px 10px;min-height:44px;white-space:nowrap}#galleryDialog .learning-nav em{display:inline-grid;place-items:center;font-style:normal;width:22px;height:22px;border-radius:50%;background:#ece0cd;margin-right:5px;font-weight:bold}#galleryDialog .learning-nav .active{background:#8c2630;color:#fff}#galleryDialog .learning-nav .active em{background:#ae4e56}#galleryDialog .learning-nav .visited:not(.active){border-bottom:3px solid #8a6b36}#galleryDialog .pano-help{bottom:86px}
#vrLearningPanel{position:absolute;top:92px;bottom:90px;right:24px;width:min(790px,68vw);z-index:5;background:#fffaf2;color:#30231c;border:1px solid #e5d0ab;border-radius:12px;box-shadow:0 16px 80px #0005;display:flex;flex-direction:column;overflow:hidden}#vrLearningPanel[hidden]{display:none}#vrLearningPanel>.learning-header{position:relative;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#831f29;color:white;pointer-events:auto}#vrLearningPanel .learning-header p{margin:0 0 4px;font-size:12px;letter-spacing:.06em;color:#f5d9b5}#vrLearningPanel .learning-header h2{font-size:26px;color:white;margin:0}#closeVrLearning{font-size:24px;line-height:1;background:#ffffff18;color:#fff;border-color:#ffffff55;min-width:42px}
.learning-body{padding:22px 26px;overflow-y:auto;flex:1;min-height:0;line-height:1.7}.learning-body:after{content:'';display:block;clear:both}.learning-lead{font-size:21px;line-height:1.7;margin:0 0 20px;font-weight:600}.guide-intro{float:right;width:90px;height:156px;margin:-4px 0 4px 18px}.guide-intro canvas{width:88px;height:156px}.lesson-video{width:100%;max-height:350px;background:#0e0e0e;border-radius:7px;display:block;clear:both}.media-credit{font-size:12px;line-height:1.6;color:#806d5d;margin:7px 0 18px}.learning-task{background:#efe3d0;padding:15px 18px;border-left:3px solid #a87a3a;border-radius:0 7px 7px 0;margin:18px 0;font-size:17px}.learning-task p{margin:5px 0 0}.learning-answer{border:1px solid #ddc8a8;border-radius:7px;padding:12px 15px;margin:12px 0}.learning-answer summary{cursor:pointer;color:#8a2430;font-weight:600}.learning-answer p{margin:10px 0 0;font-size:17px}
.occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.occasion-grid figure{margin:0}.occasion-grid img{width:100%;height:120px;object-fit:cover;border-radius:5px}.occasion-grid figcaption{text-align:center;font-size:14px}.author-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;clear:both}.author-grid figure{margin:0;padding:18px;border:1px solid #e4d3b9;border-radius:8px;background:white;text-align:center}.author-grid img{width:100%;height:210px;object-fit:contain}.author-grid figcaption b{display:block;font-size:24px;color:#81202b}.author-grid figcaption span{font-size:16px;color:#7a6551}.lesson-audio{background:#8b2630;color:#fff;border-color:#8b2630;margin:5px 6px 10px 0;font-size:16px}.lesson-audio:hover{background:#a03440}
.score-figure{clear:both;margin:18px 0;padding:16px;background:white;border:1px solid #decbb0;border-radius:8px}.score-figure img{width:100%;height:auto;cursor:zoom-in;display:block}.score-figure figcaption,.rhythm-figure figcaption{color:#846c55;font-size:12px;text-align:center;margin-top:8px}.score-figure.enlarged{overflow:auto}.score-figure.enlarged img{min-width:950px;cursor:zoom-out}.rhythm-figure{clear:both;background:white;padding:24px 16px;margin:20px 0;border:1px solid #decbb0;border-radius:8px}.rhythm-figure img{width:100%;height:110px;object-fit:contain}
.check-options{padding:18px;background:#f3eadc;border-radius:8px;clear:both}.check-options>p:first-child{font-size:18px;font-weight:bold;margin:0 0 12px}.check-options button{margin:0 8px 8px 0}.check-options button.correct{border-color:#49704a;background:#e6f0e1;color:#28572e}.check-options button.retry{border-color:#a2743b;background:#fff0d9}.choice-feedback{min-height:22px;margin:5px 0 0;font-size:15px;color:#6c4329}
.entry-rhythm{display:flex;gap:20px;margin:16px 0}.entry-rhythm span{flex:1;text-align:center;padding:15px;background:#f2e6d4;border-radius:8px}.entry-rhythm b{display:block;font-size:40px;color:#8d2530}.symbol-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.symbol-card{padding:22px;display:flex;flex-direction:column;align-items:center;gap:8px}.symbol-card strong{font-size:60px;line-height:1;color:#861e29}.crescendo-sign{width:105px;height:35px;display:block;position:relative}.crescendo-sign:before,.crescendo-sign:after{content:'';height:3px;width:105px;background:#861e29;position:absolute;left:0;top:16px;transform-origin:left}.crescendo-sign:before{transform:rotate(-10deg)}.crescendo-sign:after{transform:rotate(10deg)}
.triplet-demo{display:flex;gap:12px;margin:24px 0}.triplet-demo div{flex:1;text-align:center;font-size:35px;font-weight:bold;background:#eee1ce;padding:20px;border-radius:10px;border:2px solid transparent}.triplet-demo .on{background:#8b2630;color:white;border-color:#e6b955}.triplet-status{font-size:16px;color:#78583c}.instrument-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;clear:both}.instrument-grid button{padding:12px}.instrument-grid img{width:100%;height:100px;object-fit:contain}.instrument-grid span{display:block;color:#7b2630;font-weight:bold}.drum-practice{display:flex;align-items:center;gap:24px;margin:20px 0}.drum-practice h4{margin:0;font-size:20px}#vrDrum{flex:none;width:140px;height:140px;border-radius:50%;background:#902833;color:white;border:9px solid #bc9c64;font-size:44px}#vrDrum span{display:block;font-size:13px}#vrDrum:active{transform:scale(.97)}.learning-body blockquote{margin:20px 0;border-left:3px solid #9b2835;padding:16px 20px;background:#f2e6d5;font-size:19px}
#vrLearningPanel>footer{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-top:1px solid #e1ceb3;background:#f8efdf;gap:10px}#vrLearningPanel>footer button{font-size:14px;padding:7px 12px}#vrLearningPanel>footer span{font-size:13px;color:#896d50}
#galleryDialog.clean-ui #vrMarkers,#galleryDialog.clean-ui #vrProgress,#galleryDialog.clean-ui #vrLearningPanel{display:none}
.guide-intro{width:60px;height:106px;margin:-4px 0 8px 18px}.guide-intro canvas{width:60px;height:106px}#galleryDialog .learning-nav button{font-size:15px}
@media(max-width:1050px){#galleryDialog .learning-nav{justify-content:flex-start;overflow-x:auto;padding-bottom:6px;left:12px;right:12px}#vrLearningPanel{width:min(760px,86vw);right:14px}.vr-marker{font-size:13px}#vrProgress{font-size:12px;left:18px;top:92px}}
@media(max-width:650px){#vrLearningPanel{top:85px;bottom:92px;width:calc(100% - 20px);right:10px}.learning-body{padding:16px}.learning-lead{font-size:18px}.learning-header{padding:12px!important}.guide-intro{width:62px;height:110px}.guide-intro canvas{width:62px;height:110px}.author-grid img{height:160px}.occasion-grid img{height:80px}.drum-practice{gap:14px}#vrDrum{width:105px;height:105px}.instrument-grid{grid-template-columns:repeat(2,1fr)}#vrProgress{top:82px}}