.learn-page{max-width:1340px;margin-inline:auto;padding:24px 16px 48px;container-type:inline-size}.learn-page__grid{grid-template-columns:minmax(0,1fr);gap:24px;display:grid}@container (min-width:980px){.learn-page__grid{grid-template-columns:minmax(0,1fr) 320px}}.learn-pill{border:1px solid hsl(var(--border));background:hsl(var(--card));min-height:36px;color:hsl(var(--foreground));border-radius:10px;align-items:center;gap:6px;padding:0 12px;font-size:13px;font-weight:500;display:inline-flex}.learn-pill:focus-visible,.learn-btn:focus-visible,.learn-step:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}.learn-pill[aria-pressed=true]{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.learn-pill--record{border-color:hsl(var(--destructive) / .6)}.learn-pill--record:before{content:"";background:hsl(var(--destructive));border-radius:50%;width:8px;height:8px}.learn-btn{background:hsl(var(--primary));min-height:40px;color:hsl(var(--primary-foreground));box-shadow:0 6px 20px hsl(var(--primary) / .35);border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:14px;font-weight:600;display:inline-flex}.learn-btn--accent{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}.learn-btn--round{width:40px;padding:0}.learn-progress{gap:4px;height:6px;display:flex}.learn-progress__seg{background:hsl(var(--primary) / .2);cursor:pointer;border-radius:3px;height:100%;position:relative;overflow:hidden}.learn-progress__seg>span{background:hsl(var(--primary));position:absolute;inset:0 auto 0 0}[dir=rtl] .learn-progress__seg>span{inset:0 0 0 auto}.learn-strip{background:hsl(var(--muted));color:hsl(var(--foreground));border-radius:10px;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px 12px;font-size:13px;display:flex}.learn-strip--warn{background:hsl(var(--warning,var(--accent)) / .15)}.learn-strip__tag{background:hsl(var(--accent));color:hsl(var(--accent-foreground));border-radius:6px;padding:2px 8px;font-size:12px;font-weight:600}.learn-step{text-align:start;width:100%;color:hsl(var(--muted-foreground));border-radius:10px;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:8px;display:grid}.learn-step[aria-current=step]{background:hsl(var(--primary) / .12);color:hsl(var(--foreground))}.learn-step__n{background:hsl(var(--muted));border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;font-weight:700;display:inline-flex}.learn-step[aria-current=step] .learn-step__n{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}.learn-next{grid-template-columns:minmax(0,1fr);gap:12px;display:grid}@container (min-width:640px){.learn-next{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.learn-next__card{border:1px solid hsl(var(--border));background:hsl(var(--card));color:hsl(var(--foreground));border-radius:14px;flex-direction:column;gap:6px;padding:18px;display:flex}.learn-next__card--ttn{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.learn-sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.learn-frame-ring{border-radius:16px;transition:box-shadow .3s}.learn-frame-ring[data-try]{box-shadow:0 0 0 3px hsl(var(--accent))}.learn-try{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border-radius:14px;flex-direction:column;gap:10px;padding:16px;display:flex}.learn-try__row{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.learn-try__tag{background:hsl(var(--accent));color:hsl(var(--accent-foreground));letter-spacing:.04em;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}.learn-try__hint{text-wrap:pretty;font-size:16px;font-weight:700}.learn-try__chord{color:hsl(var(--muted-foreground));font-size:13px}.learn-try__chord b{color:hsl(var(--foreground));font-size:16px}.learn-try__tips{color:hsl(var(--muted-foreground));text-wrap:pretty;font-size:13px}.learn-try__actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.learn-try__reset,.learn-try__go{height:40px;font:inherit;cursor:pointer;border-radius:10px;font-size:14px;line-height:1}.learn-try__reset{border:1px solid hsl(var(--border));background:hsl(var(--background));color:hsl(var(--foreground));padding:0 14px;font-weight:600}.learn-try__go{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:0;align-items:center;gap:8px;padding:0 18px;font-weight:700;display:flex}.learn-try__reset:focus-visible,.learn-try__go:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}@font-face{font-family:Bravura;src:url(/alphatab/font/Bravura.woff2)format("woff2");font-display:block}