.chapters{display:flex;gap:12px;list-style:none;padding:0;font-size:14px}.chapters li{flex:1;border-bottom:3px solid #c6cbb6;padding:8px 0}.chapters .current{color:#935623;border-color:#aa7737;font-weight:bold}.sing-scene{position:relative;overflow:hidden;isolation:isolate}.landscape{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}.person{position:absolute;top:30%;width:25%;height:59%;padding:0;border:0;background:none;z-index:3;transition:left 1.2s ease,transform .6s}.teacher{left:18%}.student{left:56%}.sprite{position:absolute;inset:0;background:url('assets/sing-actors.png') 0 50%/300% 100% no-repeat;pointer-events:none}.student .sprite{background-position-x:50%}.student.bow .sprite{background-position-x:100%}.student.leaving{left:72%;transform:scale(.88)}.label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;background:#244b38;color:#fff7db;padding:4px 9px;border-radius:12px;font-size:14px;pointer-events:none}.person:hover .sprite{filter:drop-shadow(0 0 6px #ffe091)}.scene-message{position:absolute;bottom:0;left:3%;right:3%;background:#fff9e9ed;padding:8px 12px;font-size:14px;z-index:5;pointer-events:none}.hotspot{position:absolute;background:#fff8dfe6;color:#34513b;border:2px dashed #b48b3b;border-radius:10px;padding:9px;font-size:14px;z-index:4}.trees{left:3%;top:21%}.clouds{right:10%;top:6%}.beat{position:absolute;top:22%;left:38%;border-radius:50%;padding:10px 17px;background:#f2db94;color:#715122;font-size:22px;z-index:4;pointer-events:none}.forest-motion{position:absolute;inset:0;background:url('assets/sing-road.png') center/100% 100%;clip-path:polygon(0 0,23% 0,23% 62%,0 62%);pointer-events:none;opacity:0}.singing .forest-motion{opacity:1;animation:rustle .55s ease-in-out infinite alternate}.singing .teacher .sprite{animation:sing-sway .65s ease-in-out infinite alternate;transform-origin:50% 90%}@keyframes rustle{to{transform:translateX(3px) rotate(.3deg)}}@keyframes sing-sway{to{transform:rotate(-3deg)}}.choice{background:#fffdf3;border:2px solid #a8bb95;border-radius:6px;padding:12px 16px;color:#31523a;min-height:48px;text-align:left}.spoken{padding:16px;background:#f5edcb;border-left:4px solid #a67a36}.controls{flex-wrap:wrap}@media(max-width:540px){.chapters{gap:6px;font-size:13px}.scene-message{font-size:13px;padding:5px 8px}.hotspot{font-size:13px;padding:6px}.label{font-size:13px;padding:3px 6px}.beat{font-size:18px;top:14%}}@media(prefers-reduced-motion:reduce){.person{transition:none}.singing .forest-motion,.singing .teacher .sprite{animation:none}}
.teacher{width:24%}.teacher .sprite{background-size:247.742% 100%}.student{width:15.6%}.student .sprite{background-size:380.198% 100%;background-position-x:54.77%}.student.bow{width:19.8%}.student.bow .sprite{background-size:300% 100%;background-position-x:100%}