#toneSlide{overflow:auto;padding:12px 24px;text-align:center}#toneSlide h1{font-size:30px;margin:0}#toneSlide .page-heading{margin-bottom:8px}#toneSlide button{min-height:64px}#slideExamples{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}#slideExamples button{padding:8px 20px}#toneSlide button[aria-pressed=true]{outline:4px solid #91bc81;background:#eef6dc}#slideContext{margin:10px 0;color:#526d4a}#slideTracks{display:flex;gap:24px;justify-content:center}.slide-track{width:112px;min-height:112px;border:2px solid #d1dab9;border-radius:22px;background:#fffaf0;color:#7b9b70;font:inherit}.slide-track svg{width:64px;height:64px;display:block;margin:auto}.slide-track span{font-size:16px}.slide-stage{position:relative;width:min(480px,100%);height:220px;margin:6px auto;background:#f0f5de;border-radius:32px;overflow:hidden}#slidePlay{width:100%;height:100%;border:0;background:transparent;color:#b3ca84;touch-action:none;padding:0}#slidePlay svg{width:100%;height:100%}.slide-start{position:absolute;left:10%;top:25%;font-size:24px;color:#528745}#slidePlay[data-tone="1"] .slide-start,#slidePlay[data-tone="5"] .slide-start{display:none}#slidePlay[data-tone="2"] .slide-start{top:70%}#slidePlay[data-tone="4"] .slide-start{top:17%}#slideFriend{position:absolute;width:88px;height:88px;transform:translate(-50%,-75%);pointer-events:none}#slideFriend .portrait{width:100%;height:100%;display:block}#slideFriend img{width:100%;height:100%;object-fit:contain}#slideHint{margin:6px 0;min-height:24px}#toneSlide .actions{gap:16px;margin-top:8px}#slideDone{margin:8px 0;color:#527248}#toneSlideEntry{min-height:64px}@media(max-width:800px){#toneSlide{padding:16px}#slideTracks{gap:24px;flex-wrap:wrap;max-width:440px;margin:auto}.slide-track{width:112px}.slide-stage{height:280px;margin:16px auto}#toneSlide h1{font-size:28px}}@media(prefers-reduced-motion:reduce){#toneSlide *{scroll-behavior:auto}}