.tutorial-player{color:#111;background:#fff;width:100%;font-family:Arial,Helvetica,sans-serif}.tutorial-composition{width:100%;margin-inline:auto;container-type:inline-size}.tutorial-video-window{aspect-ratio:1920/536;background:#111;overflow:hidden}.tutorial-video-window video{object-fit:cover;object-position:center 56%;width:100%;height:100%;display:block}.tutorial-guide{aspect-ratio:1920/477;width:100%;height:auto;display:block}.tutorial-lyrics{color:#111;text-align:center;text-wrap:balance;overflow-wrap:anywhere;background:#fff;justify-content:center;align-items:center;min-height:clamp(54px,5cqi,92px);margin:0;padding:clamp(10px,1cqi,18px) 20px;font-size:clamp(16px,2.8cqi,48px);font-weight:500;line-height:1.25;display:flex}.tutorial-controls{padding:16px 24px 5px}.tutorial-transport{align-items:center;gap:12px;display:flex}.tutorial-player button,.tutorial-player select{color:#111;min-height:44px;font:inherit;background:#fff;border:1px solid #d1d1d1;border-radius:3px;padding:9px 13px;font-size:13px;line-height:1.4}.tutorial-player button:hover{background:#f2f2f2}.tutorial-player .tutorial-play,.tutorial-player button[aria-pressed=true]{color:#fff;background:#111;border-color:#111}.tutorial-player .tutorial-play:hover,.tutorial-player button[aria-pressed=true]:hover{background:#333}.tutorial-play{min-width:70px}.tutorial-transport input{accent-color:#111;flex:1;min-width:40px}.tutorial-time{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}.tutorial-options{flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;display:flex}.tutorial-options label{align-items:center;gap:8px;font-size:12px;display:flex}.tutorial-options label:last-child{margin-left:auto}.tutorial-player .tutorial-error{color:#8a2525;padding:12px 0 0;font-size:13px}.tutorial-chart{color:#111;background:#fff;border-top:1px solid #e3e3e3;margin-top:22px;padding:20px 24px 0;font-family:Arial,Helvetica,sans-serif}.tutorial-chart-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;display:flex}.tutorial-chart-preview{pointer-events:none;-webkit-user-select:none;user-select:none;margin-top:14px;-webkit-mask-image:linear-gradient(#000 65%,#0000 100%);mask-image:linear-gradient(#000 65%,#0000 100%)}.tutorial-chart-preview img{width:100%;height:auto;display:block}.tutorial-chart-membership{text-align:center;padding:8px 0 18px}.tutorial-chart-membership .song-button{white-space:normal;text-wrap:balance}.tutorial-chart-membership p{color:#666;margin-top:12px;font-size:13px}.tutorial-chart-membership p a{text-decoration:underline}.tutorial-chart h3{letter-spacing:-.4px;margin:0;font-size:20px;font-weight:700}.tutorial-chart-heading p{color:#666;margin:4px 0 0;font-size:13px}.tutorial-chart-tools{align-items:center;gap:8px;font-size:12px;display:flex}.tutorial-chart-tools button{color:#111;min-width:44px;min-height:44px;font:inherit;cursor:pointer;background:#fff;border:1px solid #d1d1d1;border-radius:3px;padding:8px 12px}.tutorial-chart-tools button[aria-pressed=true]{color:#fff;background:#111;border-color:#111}.tutorial-chart-tools button:disabled{opacity:.35;cursor:default}.tutorial-chart-current{font-variant-numeric:tabular-nums;align-items:center;gap:7px;margin-block:14px 10px;font-size:12px;display:flex}.tutorial-chart-key{background:#f7df7f;border:1px solid #af8b0d;border-radius:3px;width:12px;height:12px}.tutorial-chart-loading{font-size:13px;position:absolute;top:16px;left:16px}.tutorial-chart-page{-webkit-user-select:none;user-select:none;background:#fff;width:100%;position:relative}.tutorial-chart-page canvas{width:100%;height:auto;display:block}.tutorial-chart-page canvas[role=button]{cursor:zoom-in}.tutorial-chart-page div.tutorial-chart-chord{pointer-events:none}.tutorial-chart:fullscreen,.tutorial-chart-expanded{z-index:30;width:100%;height:100dvh;margin:0;padding:20px 24px;position:fixed;inset:0;overflow:clip auto}.tutorial-chart-expanded .tutorial-chart-heading{z-index:2;background:#fff;border-bottom:1px solid #e3e3e3;padding-block:12px;position:sticky;top:-20px}.tutorial-chart-expanded .tutorial-chart-page{max-width:1120px;margin-inline:auto}.tutorial-chart-chord{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:4px;padding:0;position:absolute}.tutorial-chart-chord:hover{background:#f9e9a84d;border-color:#af8b0d}.tutorial-chart-chord-active,.tutorial-chart-chord-active:hover{background:#f7df7f66;border-color:#af8b0d;box-shadow:0 0 0 2px #f7df7f55}.tutorial-chart :is(button,[tabindex]):focus-visible{outline-offset:3px;outline:3px solid #111}@media print{.tutorial-chart{display:none}}.tutorial-player :is(button,select,input):focus-visible{outline-offset:3px;outline:3px solid #666}.tutorial-player:fullscreen,.tutorial-player-expanded{flex-direction:column;justify-content:center;align-items:center;height:100%;padding:10px;display:flex;overflow:auto}.tutorial-player-expanded{z-index:30;position:fixed;inset:0}.tutorial-player:fullscreen .tutorial-composition,.tutorial-player:fullscreen .tutorial-controls,.tutorial-player-expanded .tutorial-composition,.tutorial-player-expanded .tutorial-controls{width:min(100%,173.756dvh - 260.633px)}@media (max-width:600px){.tutorial-chart{padding:18px 16px 0}.tutorial-controls{padding:14px 16px 4px}.tutorial-transport{gap:8px}.tutorial-time{font-size:11px}.tutorial-options{gap:8px}.tutorial-player button,.tutorial-player select{padding-inline:10px;font-size:14px}.tutorial-options label:last-child{margin-left:0}}