#music-practice{width:min(470px,94vw);max-height:94dvh;border:1px solid #ebe2c9;box-shadow:0 25px 90px #16382c66}
.bite-shell{background:#fffdf3;padding:16px 22px 20px}
.bite-kicker{margin-top:15px}.bite-intro{margin-bottom:9px}
.bite-stamps{display:flex;align-items:center;gap:7px;margin:10px 0 13px;color:#648573;font-size:12px}
.bite-stamps span{display:grid;place-items:center;width:27px;height:27px;border:1px dashed #a5b9a3;border-radius:50%;background:#f3f4e4;transition:background .15s,transform .15s}
.bite-stamps span.collected{color:#724a10;background:#ffe295;border:1px solid #d7a64a;transform:rotate(-12deg)}
.bite-stamps b{margin-left:auto;font-size:13px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.bite-arena{display:block;position:relative;isolation:isolate;width:100%;height:312px;padding:0;overflow:hidden;border:2px solid #839c85;border-radius:26px;background:#274d42;box-shadow:inset 0 0 40px #172b21;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;transition:border-color .13s,box-shadow .13s;cursor:pointer}
.bite-arena:disabled{opacity:1;cursor:default}.bite-arena:focus-visible{outline:4px solid #d8a443;outline-offset:4px}
.bite-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.7);pointer-events:none}
.bite-arena:after{content:'';position:absolute;inset:0;background:linear-gradient(#173c3966,#244d3955 45%,#173729b8);z-index:0;pointer-events:none}
.bite-path{position:absolute;width:40%;height:90%;left:30%;top:-12%;border-right:1px dashed #c9dac02b;border-left:1px dashed #c9dac02b;transform:rotate(-9deg);z-index:1;pointer-events:none}
.bite-target{position:absolute;left:50%;top:57%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;background:#f1e5aa12;box-shadow:0 0 0 10px #cce2aa0e;z-index:2;pointer-events:none}
.bite-target svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.bite-target circle{fill:none;stroke-width:4}.target-base{stroke:#eaf0d28c;stroke-dasharray:2 8;stroke-linecap:round}.target-progress{stroke:#ffe499;stroke-width:5!important;stroke-dasharray:578;stroke-dashoffset:578;stroke-linecap:round;filter:drop-shadow(0 0 5px #f1bd47)}
.bite-target-label{position:absolute;top:56%;left:0;width:100%;z-index:2;color:#e1e9d1;font-size:13px;font-weight:500;letter-spacing:.06em;pointer-events:none}
.bite-cue-label{position:absolute;left:0;bottom:16px;width:100%;color:#f4efd1;font-size:16px;font-weight:650;letter-spacing:.04em;z-index:8;pointer-events:none}
.flying-bite{position:absolute;display:block;width:152px;height:161px;z-index:4;border:2px solid #fff4c4;border-radius:24px;background:#f5ebc9;box-shadow:0 8px 15px #061f2980;overflow:hidden;pointer-events:none;will-change:transform,top,left}
.flying-bite[hidden]{display:none}.flying-bite img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.flying-bite:after{content:'';position:absolute;inset:33% 0 0;background:linear-gradient(transparent,#183729e6);z-index:0}
.flying-bite strong{position:absolute;left:0;right:0;bottom:30px;color:#fff6cf;font-family:serif;font-size:36px;font-weight:700;line-height:1.2;letter-spacing:.02em;z-index:1;text-shadow:0 2px 4px #143d28}
.flying-bite small{position:absolute;left:0;right:0;bottom:10px;color:#fff2c8;font-size:12px;z-index:1}.flying-bite.on-cue{border-color:#ffe19a;box-shadow:0 0 0 4px #eec8524d,0 8px 20px #091f2166}.flying-bite.was-tapped strong{color:#ffdf83}
.bite-arena.singing{border-color:#f1c658;box-shadow:0 0 0 4px #f7d98c55,inset 0 0 30px #ffe29825}.bite-arena.singing .bite-cue-label{color:#ffe6a3;font-size:22px;text-shadow:0 0 16px #ffe19877}.bite-arena.singing .bite-target{background:#fdd87a22;box-shadow:0 0 0 10px #f9dc7415,0 0 30px #ffd47755}
.bite-ring-wave{position:absolute;left:50%;top:57%;width:178px;height:178px;border:4px solid #ffe9a0;border-radius:50%;transform:translate(-50%,-50%);opacity:0;z-index:7;pointer-events:none}
.bite-arena.tapped .bite-ring-wave{animation:bite-ring-burst .48s ease-out}.bite-sparkles{position:absolute;left:50%;top:57%;width:0;height:0;z-index:9;pointer-events:none}.bite-sparkles i{position:absolute;font-style:normal;color:#ffe3a3;font-size:18px;opacity:0}.bite-arena.tapped .bite-sparkles i{animation:bite-spark .53s ease-out both}
.bite-lyric{padding:9px 0 7px;min-height:38px}.bite-feedback{min-height:32px;margin:8px 0;line-height:1.5}.bite-foot{margin-top:9px}.bite-actions button{min-height:44px}
@keyframes bite-ring-burst{from{opacity:.9;transform:translate(-50%,-50%) scale(.82)}to{opacity:0;transform:translate(-50%,-50%) scale(1.45)}}
@keyframes bite-spark{0%{opacity:1;transform:rotate(var(--angle)) translateX(50px) rotate(calc(-1 * var(--angle))) scale(.5)}75%{opacity:.9}100%{opacity:0;transform:rotate(var(--angle)) translateX(calc(80px + var(--travel))) rotate(calc(-1 * var(--angle))) scale(1)}}
@media(max-width:600px){#music-practice{width:94vw;max-height:95dvh}.bite-shell{padding:12px 16px 15px}.bite-arena{height:clamp(245px,34dvh,312px)}.bite-shell h2{font-size:20px}.bite-stamps{margin-bottom:10px}.bite-intro{font-size:11px}.bite-target{width:180px;height:180px}.flying-bite{width:142px;height:152px}.flying-bite strong{font-size:34px}.bite-cue-label{bottom:12px}.bite-kicker{margin-top:11px}.bite-foot{font-size:10px}.bite-help{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.flying-bite{will-change:auto}.bite-stamps span{transition:none}.bite-arena.tapped .bite-ring-wave,.bite-arena.tapped .bite-sparkles i{animation:none}.bite-arena.tapped{outline:3px solid #e4bb5a;outline-offset:3px}}
/* The same fruit travels toward one forgiving ring or three playful paths. */
#music-practice{width:min(760px,96vw);max-height:96dvh;background:#f7fff2}.bite-shell{padding:13px 20px 16px;background:#f5fcef}.bite-shell h2{font-size:21px;margin:2px 0 5px;font-family:"Hiragino Maru Gothic ProN",sans-serif}.bite-header button{background:#d8efe0}.bite-kicker{margin:13px 0 6px;color:#457969}.bite-intro{display:none}.bite-modes{display:flex;gap:5px;background:#e1f1e6;border-radius:19px;padding:3px;width:max-content;margin:8px auto}.bite-modes button{background:none;padding:8px 16px;border-radius:17px;font-size:12px;min-height:34px}.bite-modes button[aria-pressed=true]{background:#178f7b;color:#fffbed;box-shadow:0 2px 5px #155a481a}.bite-stamps{margin:7px 0 9px}.bite-arena{height:clamp(310px,45dvh,440px);border-color:#72b49d;border-radius:23px;background:#274d42;--hit-x:50%;cursor:default}.bite-backdrop{opacity:.9;filter:saturate(.92)}.bite-arena:after{background:linear-gradient(#173e4930,#234e3940 45%,#19453877)}.bite-path{left:32%;top:0;width:36%;height:100%;transform:perspective(280px) rotateX(25deg);border-color:#fffbc036}.bite-pad{position:absolute;left:3%;top:0;height:100%;width:30%;padding:0;background:none;border:none;border-radius:0;z-index:8;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.bite-pad[data-lane="1"]{left:35%}.bite-pad[data-lane="2"]{left:67%}.bite-pad:disabled{opacity:1;cursor:default}.bite-pad:active:not(:disabled){transform:none}.bite-pad:focus-visible{outline:3px solid #ffc857;outline-offset:-5px;background:#fff5c008}.bite-target{top:66%;width:118px;height:118px;max-width:98%;max-height:none}.bite-target-label{top:84%;font-size:10px;font-weight:700;color:#fffbed;letter-spacing:.06em}.bite-pad.ready .bite-target{border-color:#ffe994;background:#ffe5812b;box-shadow:0 0 0 7px #ffe28b22,0 0 35px #ffe6a199}.bite-pad.ready .bite-target-label{color:#fff6c3}.bite-arena[data-lanes="1"] .bite-pad[data-lane="0"],.bite-arena[data-lanes="1"] .bite-pad[data-lane="2"]{display:none}.bite-arena[data-lanes="1"] .bite-pad[data-lane="1"]{left:0;width:100%}.bite-arena[data-lanes="1"] .bite-target{width:188px;height:188px}.flying-bite{width:112px;height:125px;border-radius:19px;background:#faf0c9;box-shadow:0 8px 22px #122d3270}.flying-bite strong{font-size:28px;bottom:25px}.flying-bite small{font-size:10px;bottom:8px}.bite-arena[data-lanes="1"] .flying-bite{width:151px;height:164px}.bite-arena[data-lanes="1"] .flying-bite strong{font-size:37px;bottom:31px}.bite-arena[data-lanes="1"] .flying-bite small{font-size:12px;bottom:10px}.bite-lyric{position:absolute;left:12px;right:12px;top:10px;padding:4px;min-height:30px;color:#fffce9;text-shadow:0 1px 6px #17362c;font-size:19px;z-index:7;pointer-events:none}.bite-cue-label{bottom:9px;font-size:13px;pointer-events:none}.bite-arena.singing .bite-cue-label{font-size:17px}.bite-ring-wave{top:66%;left:var(--hit-x);width:112px;height:112px}.bite-sparkles{top:66%;left:var(--hit-x)}.bite-arena[data-lanes="1"] .bite-ring-wave{width:180px;height:180px}.bite-arena.tapped .bite-ring-wave{animation:bite-ring-burst .55s ease-out}.bite-feedback{margin:8px 0;min-height:22px;color:#366f5d}.bite-progress{margin-top:9px;background:#d5e9d7}.bite-progress i{background:#1b9e86}.bite-actions .primary{background:#ef7667;color:#fffef4}.bite-foot{margin:8px 0 0;font-size:10px;line-height:1.4}.bite-help{font-size:10px;margin-top:5px}.bite-stamps span.collected{background:#ffdf82;border-color:#ffcc54;color:#634d25}
@media(max-width:600px){#music-practice{width:96vw;max-height:96dvh}.bite-shell{padding:11px 12px 13px}.bite-header{font-size:10px}.bite-kicker{font-size:9px;margin-top:9px}.bite-shell h2{font-size:18px}.bite-modes button{padding:7px 13px;font-size:11px;min-height:31px}.bite-arena{height:clamp(285px,43dvh,390px)}.bite-stamps span{width:23px;height:23px}.bite-target{width:102px;height:102px}.flying-bite{width:88px;height:108px;border-radius:15px}.flying-bite strong{font-size:23px;bottom:25px}.flying-bite small{font-size:8px;bottom:9px}.bite-arena[data-lanes="1"] .flying-bite{width:142px;height:152px}.bite-arena[data-lanes="1"] .flying-bite strong{font-size:35px}.bite-lyric{font-size:17px}.bite-arena[data-lanes="1"] .bite-target{width:176px;height:176px}}
@media(prefers-reduced-motion:reduce){.bite-arena.tapped .bite-ring-wave{animation:none}.bite-pad.ready .bite-target{outline:3px solid #ffdb76}.bite-arena.tapped{outline-color:#ffc857}}

.bite-form-label{display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;color:#386e5b;margin:7px 0}.bite-form-label select{font:inherit;min-height:44px;max-width:68%;padding:8px 11px;border:1px solid #b6d8c4;border-radius:14px;background:#fffef5;color:#235f50}
.flying-bite .note-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:43px 5px 8px;z-index:2;text-align:center}.flying-bite[data-representation] strong,.bite-arena[data-lanes="1"] .flying-bite[data-representation] strong{position:static;color:#225f4e;font:700 26px/1.4 "Hiragino Maru Gothic ProN",sans-serif;text-shadow:none;overflow-wrap:anywhere;letter-spacing:0}
.flying-bite[data-representation]:not([data-representation=image]){background:#fff8e6}.flying-bite[data-representation]:not([data-representation=image]):after{display:none}.flying-bite[data-representation]:not([data-representation=image]) img{position:absolute;width:38px;height:38px;top:7px;left:calc(50% - 19px);border-radius:50%;object-fit:cover;border:2px solid #e2c978}
.flying-bite[data-representation=image]:after{display:none}.flying-bite[data-representation=meaning] strong{font-size:19px}.flying-bite[data-representation=pinyin] strong{font-size:18px;color:#5a6555;font-family:Georgia,serif;word-break:normal;overflow-wrap:normal}.flying-bite ruby{font-size:26px;line-height:1.4;color:#225f4e;font-weight:700}.flying-bite rt{font:11px/1.3 Georgia,serif;color:#71633f}
.bite-arena[data-lanes="1"] .flying-bite[data-representation] strong{font-size:30px}.bite-arena[data-lanes="1"] .flying-bite[data-representation=meaning] strong{font-size:25px}.bite-arena[data-lanes="1"] .flying-bite[data-representation=pinyin] strong{font-size:24px}.bite-arena[data-lanes="1"] .flying-bite ruby{font-size:33px}.bite-arena[data-lanes="1"] .flying-bite rt{font-size:13px}.bite-arena[data-lanes="1"] .note-copy{padding-top:46px}
@media(max-width:600px){.bite-form-label{font-size:10px;gap:6px;margin:5px 0}.bite-form-label select{font-size:11px}.flying-bite[data-representation] strong{font-size:21px}.flying-bite[data-representation=meaning] strong{font-size:16px}.flying-bite[data-representation=pinyin] strong{font-size:16px}.flying-bite ruby{font-size:21px}.flying-bite rt{font-size:10px}.flying-bite .note-copy{padding-top:37px}.flying-bite[data-representation]:not([data-representation=image]) img{height:31px;width:31px;left:calc(50% - 15.5px);top:5px}}

/* Each meaning keeps its own language for reading and assistive technology. */
.study-meaning{display:block;min-width:0;overflow-wrap:anywhere}
.study-meaning+.study-meaning{margin-top:2px}
.scene-pick-caption small{display:grid;gap:1px;max-width:min(34vw,160px);white-space:normal;text-align:center}
.scene-pick-caption small .study-meaning{line-height:1.35}
.bite-arena[data-study=both] .flying-bite[data-representation=meaning]{height:143px}
.bite-arena[data-study=both] .flying-bite[data-representation=meaning] .note-meaning{font-size:15px;line-height:1.3}
.bite-arena[data-study=both] .note-meaning .study-meaning[lang=en]{font-size:13px;font-weight:600;color:#536c55}
.bite-arena[data-study=both][data-lanes="1"] .flying-bite[data-representation=meaning]{height:174px}
.bite-arena[data-study=both][data-lanes="1"] .flying-bite[data-representation=meaning] .note-meaning{font-size:21px}
.bite-arena[data-study=both][data-lanes="1"] .note-meaning .study-meaning[lang=en]{font-size:16px}
@media(max-width:600px){
  .bite-arena[data-study=both] .flying-bite[data-representation=meaning]{height:130px}
  .bite-arena[data-study=both] .flying-bite[data-representation=meaning] .note-meaning{font-size:13px;line-height:1.3}
  .bite-arena[data-study=both] .note-meaning .study-meaning[lang=en]{font-size:12px}
  .bite-arena[data-study=both][data-lanes="1"] .flying-bite[data-representation=meaning]{height:166px}
  .bite-arena[data-study=both][data-lanes="1"] .flying-bite[data-representation=meaning] .note-meaning{font-size:19px}
  .bite-arena[data-study=both][data-lanes="1"] .note-meaning .study-meaning[lang=en]{font-size:15px}
}
.bite-arena[data-study="both"][data-lanes="3"] .note-meaning .study-meaning[lang="ja"]{text-wrap:balance}