:root{color:#292929;background:#f8f5f0;font-family:"Yu Mincho",serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;cursor:default}button:focus-visible{outline:3px solid #4a8e85;outline-offset:5px}
.preview-frame{width:min(100vw,177.777778vh);aspect-ratio:16/9;margin:auto;position:relative}.canvas{position:absolute;width:1600px;height:900px;transform:scale(var(--scale,1));transform-origin:top left;overflow:hidden;background:#f8f5f0}
.paper{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23766550' opacity='.14' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.header{position:absolute;inset:0 0 auto;height:86px}.header:after{content:"";position:absolute;left:33px;right:25px;bottom:0;height:1.5px;background:#7e7b76}
.reference-crop{overflow:hidden;position:absolute}.reference-crop img{position:absolute;width:1600px;height:900px;max-width:none}
.brand{left:43px;top:14px;width:246px;height:63px}.brand img{left:-43px;top:-14px}
.title-art{left:77px;top:132px;width:332px;height:112px;margin:0}.title-art img{left:-77px;top:-132px}
nav{position:absolute;left:635px;top:20px;display:flex;gap:25px;height:52px}
.nav-button{position:relative;border:0;background:none;width:97px;font-size:28px;font-weight:600;padding:0}.nav-button.active:after{content:"";position:absolute;left:1px;right:4px;bottom:0;height:4px;background:#df6655;border-radius:3px}
.nav-button.nav-notice{width:125px;white-space:nowrap}
.help{position:absolute;right:37px;top:23px;border:0;background:none;display:flex;align-items:center;gap:15px;font-size:29px;font-weight:600;padding:0}.help span{width:45px;height:45px;border:3px solid;border-radius:50%;display:grid;place-items:center;font:32px Georgia}
.settings{position:absolute;left:432px;top:161px;height:61px;display:flex;align-items:center;gap:20px}.bpm-label{font:bold 27px Georgia;letter-spacing:1px;margin-right:8px}.bpm{width:205px;height:61px;display:flex;align-items:center;border:1.4px solid #888;border-radius:11px}.bpm button{border:0;background:none;width:63px;font:38px Georgia;height:59px}.bpm output{flex:1;text-align:center;font:40px Georgia}
.select{width:193px;height:61px;border:1.4px solid #888;border-radius:11px;background:transparent;padding:0 25px;display:flex;align-items:center;justify-content:space-between;font-size:28px;white-space:nowrap}.select.rounds{width:184px}.chevron{width:10px;height:10px;border-right:1.4px solid;border-bottom:1.4px solid;transform:rotate(45deg);margin-left:12px;margin-top:-5px}.exercise{position:absolute;left:1186px;top:157px;width:227px;height:65px;font-family:"Yu Gothic UI",Meiryo,sans-serif;font-weight:700;font-size:29px;padding-inline:18px 30px}.exercise span{font-size:24px}
.board{position:absolute;left:80px;top:309px;width:1124px;height:278px;overflow:visible}.board-art{width:100%;height:100%;display:block}.fingers{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.finger{fill:#f8f5f0;stroke-width:5}.finger-1{stroke:#546f37}.finger-2{stroke:#4a8e83}.finger-3{stroke:#564c8b}.finger-4{stroke:#923e60}.finger-text{fill:#df6958;font:30px "Yu Gothic UI",sans-serif;text-anchor:middle;dominant-baseline:central}.board .finger-text{fill:#993321;font-weight:600}
.hand{position:absolute;left:1254px;top:280px;width:255px;height:305px}.hand-art,.hand-markers{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.record-option{position:absolute;left:557px;top:661px;display:flex;align-items:center;gap:18px;font:700 30px "Yu Gothic UI",Meiryo,sans-serif;color:#e86b59;height:49px}.toggle{width:89px;height:49px;background:#f1c6bb;border:1.5px solid #ff6551;border-radius:28px;position:relative}.toggle:after{content:"";position:absolute;top:-1px;right:-1px;width:49px;height:49px;border-radius:50%;background:#e46b58}
.start{position:absolute;left:775px;top:639px;width:272px;height:79px;border:0;border-radius:17px;background:#df6956;color:white;font-size:39px;font-weight:400}
.mixer{position:absolute;left:37px;top:784px;width:1527px;height:72px;display:grid;grid-template-columns:527px 502px 498px}.channel{position:relative;border-top:1.5px solid #8b8984;display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 15px;font-size:23px;white-space:nowrap}.channel+.channel{border-left:2px solid #faf8f5}.channel:last-child{padding-right:60px}.channel strong{font-weight:500}.channel:last-child strong{font:700 19px "Yu Gothic UI",Meiryo,sans-serif}.slider{position:relative;width:234px;height:7px;border-radius:6px;background:#d3d2ce;flex:none;margin-left:5px}.slider i{display:block;height:7px;background:#e26752;border-radius:6px}.slider b{position:absolute;top:50%;width:20px;height:20px;background:#e26752;border-radius:50%;transform:translate(-50%,-50%)}
.active-view .title-art{top:157px}.active-view .exercise{left:1276px;top:142px;width:210px}.active-view .board{top:316px}.active-view .hand{top:287px}.tempo{position:absolute;left:1286px;top:649px;font:700 52px "Times New Roman",serif;color:#000;white-space:nowrap}.tempo span{font:62px Georgia;vertical-align:-2px}.stop{position:absolute;left:719px;top:718px;width:163px;height:77px;border:0;border-radius:14px;color:white;background:#e26c5a;font:700 29px "Yu Gothic UI",Meiryo,sans-serif}
/* Match the reference's fixed labels and slider positions. */
.bpm-label{width:71px;margin-right:0}
.channel{font-size:22px}
.channel:first-child .slider{width:230px}
.channel:nth-child(2){padding-right:51px}
.channel:first-child .slider i{width:62%!important}
.channel:first-child .slider b{left:62%!important}
.channel:nth-child(n+2) .slider i{width:35%!important}
.channel:nth-child(n+2) .slider b{left:35%!important}
.hand-art{overflow:hidden}