.phono-inline{gap:.9rem;margin-top:1.4rem;display:grid}.phono-chart{box-shadow:0 0 0 1px var(--hair), 0 26px 50px -36px #16140f4d;background:#16140f09;border-radius:1.1rem;margin:0;padding:.35rem}.phono-chart-in{background:var(--paper-hi);border-radius:.8rem;overflow:hidden;box-shadow:inset 0 1px #ffffffb3}.phono-chart canvas{width:100%;display:block}.chapter-lab .phono-chart{margin-top:1.2rem}.phono-listen{background:var(--ink);color:var(--paper-hi);font:inherit;cursor:pointer;border:0;border-radius:999px;justify-self:start;align-items:center;gap:.7rem;padding:.55rem .6rem .55rem 1.1rem;font-size:.95rem;transition:transform .35s cubic-bezier(.32,.72,0,1),background .4s cubic-bezier(.32,.72,0,1);display:inline-flex}.phono-listen:hover{background:#2a2720}.phono-listen:active{transform:scale(.98)}.phono-listen i{background:#ffffff1a;border-radius:50%;place-items:center;width:1.9rem;height:1.9rem;transition:transform .35s cubic-bezier(.32,.72,0,1);display:grid}.phono-listen:hover i{transform:translate(2px)scale(1.05)}.phono-listen svg{width:.95rem;height:.95rem}.phono-listen.on{background:var(--accent)}.phono-crank{grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:.3rem 1.2rem;display:grid}.phono-crank-k{letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#16140f8c);grid-area:1/2;font-size:.72rem}.phono-crank-v{grid-area:2/2;font-size:.95rem}.phono-crank-dial{background:radial-gradient(circle at 50% 40%, var(--paper-hi), #16140f0f);width:84px;height:84px;box-shadow:inset 0 2px 6px #16140f2e, 0 0 0 1px var(--hair);cursor:grab;touch-action:none;border-radius:50%;outline:none;grid-area:1/1/span 2;position:relative}.phono-crank-dial:focus-visible{box-shadow:inset 0 2px 6px #16140f2e, 0 0 0 2px var(--accent)}.phono-crank-dial.is-on{cursor:grabbing}.phono-crank-arm{display:block;position:absolute;inset:0}.phono-crank-arm:before{content:"";background:linear-gradient(#cfcac0,#8d887f);border-radius:4px;width:34px;height:7px;margin-top:-3.5px;position:absolute;top:50%;left:50%}.phono-crank-arm b{background:radial-gradient(circle at 40% 35%,#8a6446,#4a3020);border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;position:absolute;top:50%;left:calc(50% + 26px);box-shadow:0 2px 4px #16140f4d}.phono-crank-hub{background:radial-gradient(circle at 40% 35%,#e3ded4,#8d887f);border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%}.phono-hud .hud-v,.phono-hud .hud-k{text-transform:none}@media (width<=899px){body[data-slug=phonograph] .hud .hud-v{font-size:12px;line-height:1.35}}@media (prefers-reduced-motion:reduce){.phono-listen,.phono-listen i{transition:opacity .2s}}
