.apin{background:linear-gradient(135deg, #e5393514, transparent 38%), var(--bg-secondary);border:1px solid var(--border-light);box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;box-shadow:var(--shadow-sm);border-radius:14px;align-items:center;gap:12px;margin:10px 0;padding:12px;display:flex}.apin--preview{background:radial-gradient(circle at 0% 0%, #e5393538, transparent 34%), linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));border-color:color-mix(in srgb, var(--accent-primary,#e53935) 24%, var(--border-light));align-items:stretch;gap:14px;margin:0;padding:14px;box-shadow:0 18px 44px #00000029}.apin__media{flex:none;align-items:center;gap:10px;min-width:190px;display:flex}.apin__art{color:#fff;letter-spacing:.08em;background:linear-gradient(145deg,#e53935f2,#741614f2);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:12px;font-weight:800;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff38}.apin__art img{object-fit:cover;cursor:default;width:100%;height:100%}.apin__meta{flex-direction:column;gap:2px;min-width:0;display:flex}.apin__kicker{color:var(--accent-primary,#e53935);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:800;line-height:1}.apin__title{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:13px;font-weight:700;line-height:1.25;overflow:hidden}.apin__subtitle{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:11px;line-height:1.25;overflow:hidden}.apin__play{border:1px solid var(--accent-primary,#e53935);width:38px;height:38px;color:var(--accent-primary,#e53935);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:opacity .15s,transform .1s;display:flex}.apin__play:hover:not(:disabled){opacity:.85;transform:scale(1.05)}.apin__play:active:not(:disabled){transform:scale(.95)}.apin__play:disabled{opacity:.4;cursor:default}.apin__spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;animation:.75s linear infinite apin-spin;display:block}.apin__progress{flex:1;min-width:0;padding:14px 0;position:relative}.apin__track{background:color-mix(in srgb, var(--border-light) 75%, transparent);border-radius:999px;height:6px;overflow:hidden}.apin__fill{background:var(--accent-primary);transform-origin:0;pointer-events:none;width:100%;height:100%;transition:transform 80ms linear;transform:scaleX(0)}.apin__thumb{background:var(--accent-primary);border:2px solid var(--bg-secondary);pointer-events:none;border-radius:50%;width:14px;height:14px;transition:transform .15s;position:absolute;top:50%;transform:translate(-50%,-50%)scale(.85);box-shadow:0 2px 8px #0000003d}.apin__progress:hover .apin__thumb{transform:translate(-50%,-50%)scale(1)}.apin__time{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;flex-shrink:0;min-width:74px;font-size:12px}.apin__sep{opacity:.5}.apin__speed{border:1px solid var(--border-light);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:6px;flex-shrink:0;padding:3px 7px;font-family:inherit;font-size:11px;font-weight:600;transition:background .15s,color .15s,border-color .15s}.apin__speed:hover{background:color-mix(in srgb, var(--accent-primary,#e53935) 10%, transparent);color:var(--accent-primary,#e53935);border-color:var(--accent-primary,#e53935)}.apin__external{border:1px solid var(--border-light);color:var(--text-secondary);border-radius:999px;flex-shrink:0;align-self:center;padding:7px 10px;font-size:11px;font-weight:700;line-height:1;text-decoration:none;transition:background .15s,border-color .15s,color .15s}.apin__external:hover{background:var(--bg-hover);border-color:var(--accent-primary,#e53935);color:var(--accent-primary,#e53935);text-decoration:none}@media (width<=720px){.apin{flex-wrap:wrap}.apin__media{width:100%;min-width:0}.apin__progress{flex-basis:calc(100% - 150px)}}@media (width<=480px){.apin{gap:10px}.apin__title,.apin__subtitle{max-width:100%}.apin__progress{flex-basis:100%;order:4;padding:6px 0 4px}.apin__time{margin-left:auto}}@keyframes apin-spin{to{transform:rotate(360deg)}}